diff options
Diffstat (limited to 'files/fr/web')
2011 files changed, 9849 insertions, 9853 deletions
diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index 6f169ef86e..5613052a40 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -10,11 +10,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and original_slug: >- Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles --- -Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. +Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. ## Problématique -La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. +La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. _Exemple 1: Code d_’_une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions._ @@ -44,13 +44,13 @@ _Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuv ## ARIA -[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. +[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. > **Attention :** Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et **les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA**. Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué. -Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène. +Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène. _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes._ @@ -77,15 +77,15 @@ _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà p </div> ``` -Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit. +Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit. ### Les changement représentationnels -Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. +Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. #### Les Changements d'états -Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : +Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : - **`aria-checked`** indique l’état d'une case à cocher ou d'un bouton radio, - **`aria-disabled`** indique qu’un élément est visible, mais désactivé, @@ -137,7 +137,7 @@ var showTip = function(el) { ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un **`role`** de `menubar` et chaque {{ HTMLElement("li") }} devrait avoir un **`role`** de `menuitem`. Le **`role`** d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau **`role`**. -Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique). +Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique). Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un **`role`** de `button`, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}. diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md index cc9585dc68..d4bc6707fb 100644 --- a/files/fr/web/accessibility/aria/aria_guides/index.md +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -14,7 +14,7 @@ original_slug: Accessibilité/ARIA/Guides_ARIA - Labelliser les composants composés (Composite Widgets) et des zones (Regions) - Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex) - Utiliser les rôles de points de repère (Landmark Roles) -- Traiter les actualisations dynamiques & des zones « Live » +- Traiter les actualisations dynamiques & des zones « Live » - Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance - Utiliser le Glisser & déposer - Notifier les utilisateurs sur les lecteurs d’écran non-ARIA diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md index 65b9feb178..b84f8b63fe 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.md +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -10,25 +10,25 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA --- ## Introduction -Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement. +Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement. -## Zones « live » basiques +## Zones « live » basiques -Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description. +Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description. -- aria-live : - - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important. -- aria-controls : +- aria-live : + - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important. +- aria-controls : - - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`. + - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`. - > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. + > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. Normalement, seul `aria-live="polite"` est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé. Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec `aria-live="off"`. -### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran +### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie. @@ -40,22 +40,22 @@ Un site web spécialisé dans l’ornithologie fournit une liste déroulante ave Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur `polite`, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi. -## Préférences de rôles pour les zones « live » spécialisées +## Préférences de rôles pour les zones « live » spécialisées -Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : +Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : | Rôle | Description | Compatibilité | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | log | Chat, erreur, jeux ou autres types de journalisation | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | status | Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant. | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | alert | Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes) | Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS. | -| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | -| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | -| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | +| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | +| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | +| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | -## Zones « live » avancées +## Zones « live » avancées -(TBD : Qu'est-ce qui est pris en charge par qui ?) +(TBD : Qu'est-ce qui est pris en charge par qui ?) Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML). @@ -64,13 +64,13 @@ The Paciello Group propose des [informations sur l'état du support des zones "L - aria-atomic : - : L’attribut `aria-atomic=BOOLÉEN` est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont `false`/`true`. La valeur par défaut est `false`. - aria-relevant : - - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. » + - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. » - aria-labelledby : - - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace. + - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace. - aria-describedby : - : L'attribut `aria-describedby=[LISTE_ID]` est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'identifiant pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace. -### Cas d’étude avancé : liste de contacts +### Cas d’étude avancé : liste de contacts Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page). @@ -80,10 +80,10 @@ Un site de chat voudrait afficher la liste des utilisateurs actuellement connect </ul> ``` -#### Détails des propriétés « live » d’ARIA : +#### Détails des propriétés « live » d’ARIA : -- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. +- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. - L’attribut `aria-atomic` n’est pas défini (`false` par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour. - L’attribut `aria-relevant="additions removals"` assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus. -TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". +TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md index 74687a3930..b5215fc235 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -97,7 +97,7 @@ Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôle - [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) - [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) -#### Attributs de zones « live » +#### Attributs de zones « live » - aria-live - aria-relevant diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md index 3a9521f0a3..38bf80ffa9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog) role. -Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : +Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : - La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`). - Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue. @@ -27,7 +27,7 @@ Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujo ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation. - Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. @@ -40,7 +40,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus se pl ### Exemples -#### Exemple 1 : Une boîte de dialogue d’alerte +#### Exemple 1 : Une boîte de dialogue d’alerte L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton `OK`. @@ -54,7 +54,7 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial </div> ``` -#### Exemples concrets : +#### Exemples concrets : À définir @@ -62,11 +62,11 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial ### Attributs ARIA utilisés -- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; -- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; +- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; +- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; - [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby). ### Techniques ARIA connexes -- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; +- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; - [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md index ff0906e7fa..6a1b71f031 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -14,7 +14,7 @@ Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http: L’attribut `aria-invalid` est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. `aria-invalid` peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation. -Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. +Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. ### Valeurs @@ -39,7 +39,7 @@ Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n ### Exemples -#### Exemple 1 : validation d’un formulaire de base +#### Exemple 1 : validation d’un formulaire de base L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de `aria-required` étant `false`, il n’est pas strictement nécessaire d’ajouter à entrer. @@ -51,9 +51,9 @@ L’extrait de code suivant décrit une version simplifiée de deux champs de fo onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/> ``` -Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé). +Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé). -L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) : +L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) : ```js function checkValidity(aID, aSearchTerm, aMsg){ @@ -69,7 +69,7 @@ function checkValidity(aID, aSearchTerm, aMsg){ } ``` -L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : +L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : ```js function updateAlert(msg) { diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md index 2dd44fb491..f19dcd5bfa 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -25,7 +25,7 @@ Les lecteurs d'écran lisent le contenu textuel de cet attribut. ## Usage -L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). +L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément `<label>` pour les éléments de formulaire, ou l'attribut `alt` pour les images. @@ -37,7 +37,7 @@ Une légende sous forme de chaîne de caractère. ### Un bouton sans contenu textuel explicite -Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « *Fermer* » classique, avec un `X` en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut `aria-label` est utilisé pour fournir un label aux technologies d’assistance. +Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « *Fermer* » classique, avec un `X` en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut `aria-label` est utilisé pour fournir un label aux technologies d’assistance. ```html <button aria-label="Fermer" onclick="myDialog.close()">X</button> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md index a7a35af681..1a90536153 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -14,13 +14,13 @@ Cette technique présente l’utilisation de l’attribut [`aria-labelledby`](ht L’attribut `aria-labelledby` est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran. -`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. +`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. -L’attribut `aria-labelledby` n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis. +L’attribut `aria-labelledby` n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis. L’attribut `aria-labelledby` peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut `for`) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA. -Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné. +Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné. ### Valeurs @@ -32,9 +32,9 @@ Lorsque les deux attributs `aria-labelledby` et [`aria-label`](/fr/Accessibilit ### Exemples -#### Exemple 1 : Labels multiples +#### Exemple 1 : Labels multiples -Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe : +Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe : ```html <div id="facturation">Facturation</div> @@ -52,7 +52,7 @@ Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois av </div> ``` -#### Exemple 2 : Association de titres et de zones +#### Exemple 2 : Association de titres et de zones Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui _contient_ l’en-tête. @@ -63,9 +63,9 @@ Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec le </div> ``` -#### Exemple 3 : Groupes de boutons radio +#### Exemple 3 : Groupes de boutons radio -Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div id="radio_label">My radio label</div> @@ -77,9 +77,9 @@ Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité </ul> ``` -#### Exemple 4 : Titre de boite de dialogue +#### Exemple 4 : Titre de boite de dialogue -Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut `aria-labelledby` : ```html <div role="dialog" aria-labelledby="titreDialogue"> @@ -88,7 +88,7 @@ Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite d </div> ``` -#### Exemple 5 : Définition intégrée +#### Exemple 5 : Définition intégrée Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut **aria-labelledby**: @@ -98,15 +98,15 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que </p> ``` -#### Exemple 6 : Listes de définitions +#### Exemple 6 : Listes de définitions -Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` : ```html <dl> <dt id="anatheme">anathème</dt> <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique - et accompagnée de l’excommunication</dd> + et accompagnée de l’excommunication</dd> <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse : condamnation</dd> <dt id="homelie">homélie</dt> @@ -116,9 +116,9 @@ Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu </dl> ``` -#### Exemple 7 : Menus +#### Exemple 7 : Menus -Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div role="menubar"> @@ -143,7 +143,7 @@ Tous les éléments de balisage de base. ### Techniques ARIA connexes -- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; +- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; - [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md index b69d64990b..4b1e1a436f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -29,7 +29,7 @@ Vocabulaire ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous présente un curseur simple orienté verticalement. @@ -48,8 +48,8 @@ L’extrait de code ci-dessous présente un curseur simple orienté verticalemen ### Utilisé avec les rôles ARIA -- scrollbar ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; - separator. ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md index f29b625d53..91cdfe0ba3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -7,7 +7,7 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant --- -L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. +L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md index 3779f56201..0582f73e61 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -18,7 +18,7 @@ L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit ### Valeurs -`true` ou `false` (Valeur par défaut : `false`) +`true` ou `false` (Valeur par défaut : `false`) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance @@ -30,7 +30,7 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Exemples -#### Exemple 1 : un formulaire simple +#### Exemple 1 : un formulaire simple ```html <form action="post"> @@ -49,12 +49,12 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Utilisé dans les rôles ARIA -- Combobox ; -- Gridcell ; -- Listbox ; -- Radiogroup ; -- Spinbutton ; -- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; +- Combobox ; +- Gridcell ; +- Listbox ; +- Radiogroup ; +- Spinbutton ; +- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; - Tree. ### Techniques ARIA connexes @@ -63,6 +63,6 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Autres ressources -- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; -- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; +- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; +- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; - [Validation de condition](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) en {{ HTMLVersionInline("5") }}. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md index c5b15f8d43..7df81da5c0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -28,7 +28,7 @@ Si la valeur `aria-valuemax` n’est pas déterminée, ou si `aria-valuemin` n ### Exemples -#### Exemple 1: +#### Exemple 1: L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10. @@ -40,15 +40,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur maximal ### Utilisés avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md index ed3cec7ca6..b00c0a91da 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -26,7 +26,7 @@ Si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-value ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1. @@ -38,15 +38,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur minimal ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md index 4cf525f585..ace6b0c1d4 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- L'attribut `aria-valuenow` est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut `aria-valuenow` ne devrait pas être défini. Si `aria-valuenow` a des valeurs minimale et maximale connues, on devrait définir les attributs [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute). -Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. +Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. L'attribut `aria-valuenow` est **obligatoire** pour les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role), [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role). @@ -63,13 +63,13 @@ L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante ## Techniques ARIA connexes -- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; -- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; +- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; +- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; - [aria-valuetext](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute). ## Compatibilité -À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. +À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. ## Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md index 4dd141cfd7..906733906b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -14,7 +14,7 @@ L’attribut `aria-valuetext` est utilisé pour définir un texte alternatif, li Les développeurs **DEVRAIENT** uniquement définir l’attribut `aria-valuetext` lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre. -Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. +Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. ### Valeurs @@ -28,7 +28,7 @@ Si l’attribut `aria-valuetext` est absent, les technologies d’assistance com ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut `aria-valuetext` est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement `aria-valuetext` selon la valeur de `aria-valuenow`. @@ -38,14 +38,14 @@ L’extrait de code ci-dessous montre un curseur simple de sélection d’un jou aria-valuetext="Dimanche"> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- scrollbar ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- scrollbar ; - [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) - spinbutton. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md index b67c6b261a..ee79d75065 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -34,17 +34,17 @@ Les technologies d'assistance **doivent** fournit une fonctionnalité permettant ```html <div role="article"> - <h1>Une titre de billet de blog</h1> - <p>contenu du billet...</p> - - <div class="comments"> - <div role="article"> - <p>Un premier commentaire</p> - </div> - <div role="article"> - <p>Un deuxième commentaire</p> - </div> - </div> + <h1>Une titre de billet de blog</h1> + <p>contenu du billet...</p> + + <div class="comments"> + <div role="article"> + <p>Un premier commentaire</p> + </div> + <div role="article"> + <p>Un deuxième commentaire</p> + </div> + </div> </div> ``` diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md index 79d19d503d..622fc36e75 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -12,7 +12,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group Cette technique présente l’utilisation du rôle [group](http://www.w3.org/TR/wai-aria/roles#group) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. +Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments [listitem](http://www.w3.org/TR/wai-aria/roles#listitem). Les éléments de groupe devraient être imbriqués. @@ -22,12 +22,12 @@ Si un auteur pense qu’une section est suffisamment importante pour faire parti ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `group` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `group` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé. - Les loupes d’écran devraient agrandir le groupe. @@ -36,7 +36,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML +#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement dans le code source HTML. @@ -69,7 +69,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML +#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement au code source HTML. @@ -92,7 +92,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.illinois.edu/aria/tree/tree2.php> @@ -110,4 +110,4 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc ### Autres ressources -- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) +- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md index 08b116042f..aa7ef0900e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -18,12 +18,12 @@ L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation. - Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. - Les loupes d’écran devraient agrandir le lien. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : **Ajoute le rôle dans le code HTML** +#### Exemple 1 : **Ajoute le rôle dans le code HTML** L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans le code source HTML. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans l <div role=”link”>Un lien</div> ``` -#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** +#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** ```html <script type="text/javascript"> @@ -65,7 +65,7 @@ function navigateLink(evt) { </body> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://codetalks.org/source/widgets/link/link.html> - <http://codetalks.org/source/widgets/link/link.sample.html> @@ -84,4 +84,4 @@ Si l'activation du lien déclenche une action mais ne déplace pas le focus du n ### Autres ressources -- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) +- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md index 350f5f7ebe..6be8ad4c37 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -18,12 +18,12 @@ Par défaut, les mises à jour ne contiennent que les changements apportés à l ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `log` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `log` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que `aria-live="assertive"` soit défini, dans quel cas l'utilisateur peut être interrompu. - Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Ajout du rôle dans du code HTML +#### Exemple 1 : Ajout du rôle dans du code HTML L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directement dans le code source HTML. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directe <div id=”liveregion” class=”region” role=”log”></div> ``` -#### Exemple 2 : Extrait d’un exemple d’application +#### Exemple 2 : Extrait d’un exemple d’application Cet extrait de code crée le journal dans une application de chat AJAX. @@ -57,10 +57,10 @@ Cet extrait de code crée le journal dans une application de chat AJAX. Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pour plus d’informations. -#### Exemples concrets : +#### Exemples concrets : -- <http://test.cita.illinois.edu/aria/live/live1.php> ; -- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; +- <http://test.cita.illinois.edu/aria/live/live1.php> ; +- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; - <http://codetalks.org/source/live/chat.html> \[[notes](http://codetalks.org/source/live/chat_notes.html)]. ### Notes @@ -78,4 +78,4 @@ Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pou ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md index 9287c5f81e..85210f2168 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -30,7 +30,7 @@ Une des recommandations d'accessibilité propose que les couleurs ou les représ <i class="icon-user" role="presentation"></i> ``` -#### Exemples concrets : +#### Exemples concrets : Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire. @@ -53,4 +53,4 @@ De plus en plus d'images sont proposées sous la forme de compositions SVG direc ## Autres ressources -Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> +Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md index 2473934478..4c440daf89 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -32,21 +32,21 @@ Les lecteurs devraient annoncer les mises à jour de la progression dès qu’el ### Exemples -#### Exemple 1 : barre de progression simple avec pourcentage de progression +#### Exemple 1 : barre de progression simple avec pourcentage de progression ```html <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> ``` -#### Exemple 2 : Utilisation de `aria-valuetext` +#### Exemple 2 : Utilisation de `aria-valuetext` ```html -<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> - Étape 2 : Copie des fichiers… +<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> + Étape 2 : Copie des fichiers… </div> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md index 9612cd75c3..42dd9adcea 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider Cette technique présente l’utilisation du rôle [slider](http://www.w3.org/TR/wai-aria/roles#slider). -Le rôle `slider` est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle `slider` est assigné à la « *molette* », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut `aria-valuenow` du curseur de défilement (et si possible `aria-valuetext`) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations. +Le rôle `slider` est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle `slider` est assigné à la « *molette* », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut `aria-valuenow` du curseur de défilement (et si possible `aria-valuetext`) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations. #### Clavier et focus -Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) : +Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) : | Touche(s) | Action | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | @@ -30,7 +30,7 @@ Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsq ### Exemples -#### Exemple 1 : Intervalle numérique simple +#### Exemple 1 : Intervalle numérique simple Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de `aria-valuenow` en réponse à l'action de l'utilisateur. @@ -46,12 +46,12 @@ Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une </div> ``` -#### Exemple 2 : Valeurs texte +#### Exemple 2 : Valeurs texte -Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut `aria-valuetext` est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine . +Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement, un nombre. Dans ces cas là, l'attribut `aria-valuetext` est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine . ```html -<div id="slider-label">Jour de la semaine :</div> +<div id="slider-label">Jour de la semaine :</div> <div class="day-slider"> <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label" @@ -63,7 +63,7 @@ Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémanti </div> ``` -L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs `aria-valuenow` et `aria-valuetext` : +L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs `aria-valuenow` et `aria-valuetext` : ```js var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; @@ -78,10 +78,10 @@ var updateSlider = function (newValue) { ### Attributs ARIA utilisés -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; -- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; - [aria-orientation](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md index 2c2e2acb40..fa61595df0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -20,21 +20,21 @@ Les technologies d’assistance devraient réserver des cellules dans la grille ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `status` accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; +- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; - Les loupes d’écran devraient agrandir l’objet d’état. > **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : ajout du rôle `status` dans le code HTML +#### Exemple 1 : ajout du rôle `status` dans le code HTML L’extrait de code ci-dessous montre comment le rôle `status` est ajouté directement dans le code source HTML. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire <p role="status">Vos modifications ont été automatiquement enregistrées.</p> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes @@ -56,4 +56,4 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md index fa0f7bcd60..c78b82924c 100644 --- a/files/fr/web/accessibility/aria/forms/alerts/index.md +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -15,9 +15,9 @@ Vous avez un formulaire – par exemple un formulaire de contact – pour lequel ## Le formulaire -Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. +Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. -Voici un formulaire simple : +Voici un formulaire simple : ```html <form method="post" action="post.php"> @@ -42,19 +42,19 @@ Voici un formulaire simple : </form> ``` -Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) +Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) ## Vérification de la validité et avertissement de l’utilisateur -Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes : +Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes : -1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». +1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». 2. Définissons l’attribut `aria-invalid` du champ et donnons lui la valeur `true`. 3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript `alert`, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre. Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements `onblur`. -La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : +La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : ```js <script type="application/javascript"> @@ -93,11 +93,11 @@ function checkValidity(aID, aSearchTerm, aMsg) ## La fonction `checkValidity` -Le cœur est la fonction `checkValidity`. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte. +Le cœur est la fonction `checkValidity`. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte. Pour déterminer la validité, la fonction vérifie si l’`indexOf` de la valeur d’entrée est plus grande que `-1`. Une valeur de `-1` ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur. -Si non valide, la fonction fait deux choses : +Si non valide, la fonction fait deux choses : 1. Elle définit l’attribut `aria-invalid` de l’élément à `true`, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct. 2. Elle appellera la fonction `addAlert` pour ajouter une alerte avec le message d’erreur donné. @@ -106,17 +106,17 @@ Si le terme recherché est trouvé, l’attribut `aria-invalid` est réinitialis ## La fonction `addAlert` -Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant `alert`, et si elle en trouve un, l’enlève du modèle objet de document (DOM). +Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant `alert`, et si elle en trouve un, l’enlève du modèle objet de document (DOM). -Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. +Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document. -Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné. +Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné. ## Ajouter de la magie à l’événement `onblur` -Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit : +Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit : ```html <input name="nom" id="nom" aria-required="true" @@ -128,18 +128,18 @@ Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. **Test de l’exemple** -Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit : +Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit : -1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. -2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. +1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. +2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge. ## Quelques questions qu’on peut se poser -- Q. Pourquoi mettre à la fois un `(required)` dans le texte du label et l’attribut `aria-required` sur certains éléments {{ HTMLElement("input") }} ? +- Q. Pourquoi mettre à la fois un `(required)` dans le texte du label et l’attribut `aria-required` sur certains éléments {{ HTMLElement("input") }} ? - : R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ. -- Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ? +- Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ? - : R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire. ## Conclusion diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md index c56dc26119..35202039fd 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les --- ## Labels de formulaire -Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant. +Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant. L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un `id`, et chaque élément {{ HTMLElement("label") }} a un attribut `for` indiquant l’`id` de l’{{ HTMLElement("input") }} associé. @@ -43,7 +43,7 @@ _Exemple 1. Formulaire basique avec labels_ L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), la spécification **Accessible Rich Internet Applications** (Applications Internet Riches Accessibles) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut [`aria-labelledby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby) dans ces cas de figure. -L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. +L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. _Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée_ @@ -81,27 +81,27 @@ _Exemple 3. Un bouton décrit par un élément séparé._ ## Champs obligatoires et invalides -Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu : +Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu : - La propriété [`aria-required`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required) peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire. - L’état [`aria-invalid`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid) peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides. -L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs `aria-required` sont définis à `true` (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut `aria-invalid` du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément). +L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs `aria-required` sont définis à `true` (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut `aria-invalid` du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément). _Exemple 4a. Un formulaire avec des champs obligatoires._ ```html <form> <div> - <label for="nom">* Nom :</label> + <label for="nom">* Nom :</label> <input type="text" value="nom" id="nom" aria-required="true"/> </div> <div> - <label for="telephone">Téléphone :</label> + <label for="telephone">Téléphone :</label> <input type="text" value="telephone" id="telephone" aria-required="false"/> </div> <div> - <label for="courriel">* Courriel :</label> + <label for="courriel">* Courriel :</label> <input type="text" value="courriel" id="courriel" aria-required="true"/> </div> </form> diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md index c6ae6daf13..79c012e9a3 100644 --- a/files/fr/web/accessibility/aria/forms/index.md +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -9,10 +9,10 @@ tags: translation_of: Web/Accessibility/ARIA/forms original_slug: Accessibilité/ARIA/formulaires --- -Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : +Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : -- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires -- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client +- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires +- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client - [Labels multi-options](/fr/Accessibilité/ARIA/formulaires/Labels_multi-options): fournir des labels de formulaire complexes avec un contrôle pour chaque label Voir également l’[article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)](https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html) (version archivée par archive.org), couvrant pour une bonne part le même sujet. diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md index 569ba26a3c..6bd4548e40 100644 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -13,15 +13,15 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options ### Problème -Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « `Effacer l’historique après [x] jours`. » « `Effacer l’historique après` » est à la gauche de la boîte texte, « `x` » est le nombre, par exemple 21, et le mot « `jours` » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre. +Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « `Effacer l’historique après [x] jours`. » « `Effacer l’historique après` » est à la gauche de la boîte texte, « `x` » est le nombre, par exemple 21, et le mot « `jours` » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre. -Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « `Effacer l’historique après 21 jours` ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran. +Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « `Effacer l’historique après 21 jours` ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran. La solution se trouve dans l'attribut ARIA `aria-labelledby`. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible. `aria-labelledby` et `aria-describedby` sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle `<label for>`/`<label>` pouvant exister, sont neutralisées par `aria-labelledby`. Si, dans une page HTML vous fournissez `aria-labelledby`, vous devriez également fournir un `<label for>` afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir. -Exemple : +Exemple : ```html <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> @@ -34,6 +34,6 @@ Exemple : JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le `nomAccessible` que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus. -### Peut-on faire la même chose sans ARIA ? +### Peut-on faire la même chose sans ARIA ? -Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. +Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md index 712a870da3..bf833414c4 100644 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md @@ -46,7 +46,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >commentaires, questions et retours Window-Eyes </a >(email) </td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -69,7 +69,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td><a href="/User:orca.clock">Orca</a></td> <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1" rowspan="5">Navigateurs</td> @@ -79,7 +79,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug WebKit.org</a > </td> - <td> </td> + <td></td> </tr> <tr> <td>Google Chrome</td> @@ -88,7 +88,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug Chromium</a > </td> - <td> </td> + <td></td> </tr> <tr> <td><p>Microsoft Internet Explorer</p></td> @@ -134,7 +134,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td>Google Web Toolkit (GWT)</td> <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> - <td> </td> + <td></td> </tr> <tr> <td>Yahoo User Interface</td> diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md index 3ca0044907..3df43be28e 100644 --- a/files/fr/web/accessibility/aria/index.md +++ b/files/fr/web/accessibility/aria/index.md @@ -44,7 +44,7 @@ En plus des déclarations _statiques_ dans le contenu HTML, les attributs ARIA p } ``` -> **Note :** ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. +> **Note :** ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. > > En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (`<main>`, `<header>`, `<nav>` etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer. @@ -79,7 +79,7 @@ Il est aussi important de tester l'ARIA écrit avec des technologies d'assistanc - [Régions dynamiques](/fr/docs/Accessibilité/ARIA/Zones_live_ARIA) (_live regions_) - : Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page. - [Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm) - - : Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari. + - : Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari. ## Processus de standardisation diff --git a/files/fr/web/accessibility/aria/roles/alert_role/index.md b/files/fr/web/accessibility/aria/roles/alert_role/index.md index 1db355caec..5414e5fa84 100644 --- a/files/fr/web/accessibility/aria/roles/alert_role/index.md +++ b/files/fr/web/accessibility/aria/roles/alert_role/index.md @@ -15,29 +15,29 @@ Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3. Le rôle `alert` est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle `alert` est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si : -- Une valeur non valide a été saisie dans un champ de formulaire ; -- La session d’un utilisateur est sur le point d’expirer ; +- Une valeur non valide a été saisie dans un champ de formulaire ; +- La session d’un utilisateur est sur le point d’expirer ; - La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `alert` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `alert` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; +- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; - Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte. > **Note :** plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : Ajout du rôle dans le code HTML +#### Exemple 1 : Ajout du rôle dans le code HTML L’extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page. @@ -45,7 +45,7 @@ L’extrait de code ci-dessous montre comment le rôle `alert` est directement a <h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> ``` -#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` +#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l’ajoute à la structure du document. @@ -58,15 +58,15 @@ myAlert.appendChild(myAlertText); document.body.appendChild(myAlertText); ``` -**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : +**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : ```js $("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); ``` -#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant +#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant -Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : +Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : ```html <p id="formInstruction">Vous devez cocher au moins trois options</p> @@ -77,16 +77,16 @@ Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà document.getElementById("formInstruction").setAttribute("role", "alert"); ``` -#### Exemple 4 : Rendre visible un élément avec le rôle `alert` +#### Exemple 4 : Rendre visible un élément avec le rôle `alert` -Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. +Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. -**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. +**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. ```css .hidden { - display:none; - } + display:none; + } ``` ```html @@ -100,8 +100,8 @@ document.getElementById("expirationWarning").className = ""; ### Notes -- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; -- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; +- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; +- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; - Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. ### Attributs ARIA utilisés @@ -110,9 +110,9 @@ document.getElementById("expirationWarning").className = ""; ### Techniques ARIA connexes -- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; - [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). ### Autres ressources -- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) +- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index 5b5d1c59ee..e0d12909b2 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner Cette technique présente l’utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). -La zone d’entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. +La zone d’entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à fait possible d'utiliser plusieurs éléments `<header>` dans une page. @@ -25,15 +25,15 @@ Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à ### Exemples -#### Une zone d'entête typique de site +#### Une zone d'entête typique de site ```html <header role="banner"> - <p><img src="logo.png" alt="Nom du site"></p> - <p>Description du site</p> - <div role="search"> - ... - </div> + <p><img src="logo.png" alt="Nom du site"></p> + <p>Description du site</p> + <div role="search"> + ... + </div> </header> ``` diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md index 0ce97c7f82..128a882ddb 100644 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox Cette technique présente l’utilisation du rôle [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox). -Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : +Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : -- `aria-checked="true"` : la case est cochée ; -- `aria-checked="false"` : la case est décochée ; -- `aria-checked="mixed"` : la case est partiellement cochée. +- `aria-checked="true"` : la case est cochée ; +- `aria-checked="false"` : la case est décochée ; +- `aria-checked="mixed"` : la case est partiellement cochée. Le développeur doit modifier dynamiquement la valeur de l’attribut `aria-checked` lorsque la case est cochée. @@ -24,12 +24,12 @@ Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; - Lorsque la valeur de l’attribut `aria-checked` change, envoyer un événement accessible de changement d’état. -Les technologies d’assistance doivent faire la chose suivante : +Les technologies d’assistance doivent faire la chose suivante : - Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer. @@ -37,14 +37,14 @@ Les technologies d’assistance doivent faire la chose suivante : ### Exemples -#### Exemple 1 : Ajout du rôle ARIA `checkbox` +#### Exemple 1 : Ajout du rôle ARIA `checkbox` ```html <span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> <label for="chk1">Enregistrer mes préférences</label> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php> diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.md b/files/fr/web/accessibility/aria/roles/dialog_role/index.md index 14ed9da8d9..166585fe59 100644 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.md +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md @@ -15,9 +15,9 @@ Cette technique présente l’utilisation du rôle [`dialog (en)`](http://www.w3 Le rôle `dialog` est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue). -Marquer un élément de dialogue avec le rôle `dialog` aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit : +Marquer un élément de dialogue avec le rôle `dialog` aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit : -- La boîte de dialogue doit être correctement labélisée ; +- La boîte de dialogue doit être correctement labélisée ; - Le focus clavier doit être géré correctement. Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites. @@ -26,7 +26,7 @@ Les sections ci-dessous décrivent comment ces deux exigences peuvent être sati Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément `<legend>` fournit un label de regroupement pour les contrôles contenus dans un élément `<fieldset>`. -Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut `aria-labelledby` pour l’élément `role="dialog"`. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous : +Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut `aria-labelledby` pour l’élément `role="dialog"`. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous : ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -44,15 +44,15 @@ Si une boîte de dialogue a une barre de titre visible, le texte de cette barre Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré : -- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. -- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. +- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. +- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. - Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte _tourne_, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue. - Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier. - Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue _modale_ s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue _non modales_ il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide [Gérer les dialogues modaux et non modaux](/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux). ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : +Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : - Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation. @@ -62,7 +62,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d ### Exemples -#### Exemple 1 : une boîte de dialogue contenant un formulaire +#### Exemple 1 : une boîte de dialogue contenant un formulaire ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -98,9 +98,9 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d </div> ``` -#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif +#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif -Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement : +Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement : ```html <fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -113,13 +113,13 @@ Pour prendre en charge les navigateurs ou les produits de technologies d’assis </fieldset> ``` -#### Exemples concrets : +#### Exemples concrets : - [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/) ### Notes -> **Note :** bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran. +> **Note :** bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran. ### Attributs ARIA utilisés diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.md b/files/fr/web/accessibility/aria/roles/listbox_role/index.md index a454806a8c..3da2c229d6 100644 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.md @@ -20,12 +20,12 @@ Lorsqu’on navigue entre les différents éléments d’une liste, le premier ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `listbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `listbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; +- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; - Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés. - Les loupes d’écran devraient agrandir la boîte liste. @@ -34,9 +34,9 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` +#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` -L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : +L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : ```html <div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" @@ -53,7 +53,7 @@ L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté dir Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) CodeTalks pour plus de détails. -#### Exemples concrets : +#### Exemples concrets : - <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html> @@ -75,5 +75,5 @@ Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) Cod ### Autres ressources -- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) -- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) +- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) +- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.md b/files/fr/web/accessibility/aria/roles/textbox_role/index.md index ce0aeb8362..09bad3f3e9 100644 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.md @@ -20,21 +20,21 @@ Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en uti ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `textbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `textbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `textbox` accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; +- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; - Les loupes d’écran devraient agrandir la boite de texte. > **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie monoligne `<input>` +#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie monoligne `<input>` L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir <input type="text" role="textbox" value="Voici du texte" /> ``` -#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie multilignes `<textarea>` +#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie multilignes `<textarea>` L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. @@ -54,11 +54,11 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir </textarea> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes -- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; +- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; - Les champs en lecture seule devraient être indiqués avec l’attribut `aria-readonly`. ### Attributs ARIA utilisés diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md index c9815e24a0..dbe36309b0 100644 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA --- -## Qu’est-ce qu’ARIA ? +## Qu’est-ce qu’ARIA ? WAI-ARIA est la spécification [Applications Internet Riches Accessibles](http://www.w3.org/WAI/intro/aria.php) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’accessibilité du Web) du [W3C](http://www.w3.org/). ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs. @@ -17,30 +17,30 @@ ARIA fournit des éléments sémantiques additionnels afin de décrire les rôle Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles). -## Où ARIA est-il pris en charge ? +## Où ARIA est-il pris en charge ? ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance. ### Navigateurs -ARIA est pris en charge dans les navigateurs suivants : +ARIA est pris en charge dans les navigateurs suivants : | Navigateur | Version minimale | Notes | | ------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Firefox | 3.0+ | Fonctionne avec NVDA, JAWS 10+ et Orca | | [Chrome](http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) | Dernière | Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15 | | Safari | 4+ | La prise en charge par Safari 5 est grandement améliorée. La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion | -| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | +| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | | [Internet Explorer](http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx) | 8+ | Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA. La prise en charge dans IE9 est grandement améliorée. | -Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : +Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : - [caniuse.com](http://caniuse.com/wai-aria) - [Le groupe Paciello](http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html) ### Technologies d’assistance -Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : +Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : | Technologies d’assistance | Version minimale pour un ARIA de base | Version minimale pour la prise en charge des zones live et des alertes | | ------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- | @@ -51,29 +51,29 @@ Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’ent | Window-Eyes | 7 | Pas de prise en charge des zones live | | ZoomText | ? | Pas de prise en charge des zones live | -Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. +Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. -For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). +For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). ### Kits de développement JavaScript -Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : +Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : - Dojo/Dijit - jQuery UI - Fluid Infusion - Google Closure -- Google Web Toolkit -- BBC Glow -- Yahoo! User Interface Library (YUI) +- Google Web Toolkit +- BBC Glow +- Yahoo! User Interface Library (YUI) -Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : +Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : -- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner +- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner -## Pouvez-vous me montrez un exemple d’ARIA en action ? +## Pouvez-vous me montrez un exemple d’ARIA en action ? -Voici le code HTML pour une barre de progression : +Voici le code HTML pour une barre de progression : ```html <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> @@ -81,13 +81,13 @@ Voici le code HTML pour une barre de progression : Cette barre de progression est construite à l’aide de l’élément `<div>`, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément `<div>`. Dans cet exemple, l’attribut `role="progressbar"` informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs `aria-valuemin` et `aria-valuemax` spécifient les valeurs limites de la barre de progression, et `aria-valuenow` décrit a valeur courante. -Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : +Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : ```js -// Trouver le <div> de la barre de progression dans le DOM. +// Trouver le <div> de la barre de progression dans le DOM. var progressBar = document.getElementById("percent-loaded"); -// Définition de ses rôles et états ARIA , +// Définition de ses rôles et états ARIA, // pour que les technologies d’assistance sachent quel type de composant il s’agit. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); @@ -100,7 +100,7 @@ function updateProgress(percentComplete) { } ``` -## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? +## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA. @@ -114,15 +114,15 @@ Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assist } ``` -## Qu'en est-il de la validation ? +## Qu'en est-il de la validation ? Les nouveaux attributs introduits dans ARIA, tels que les **`role`** et ceux préfixés avec **`aria-`**, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au [validateur du W3C](http://validator.w3.org/). -La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques. +La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques. Une autre alternative est l’utilisation d’un _doctype_ HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5. -## Comment HTML5 s’associe-t-il avec ARIA ? +## Comment HTML5 s’associe-t-il avec ARIA ? HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément `<progress>`. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon [aperçu des relations entre HTML5 et ARIA](http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/). @@ -130,7 +130,7 @@ HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entr Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un `role="progressbar"` pour les cas où la balise `<progressbar>` n’est pas prise en charge. -Voici un exemple de code utilisé pour une barre de progression en HTML5 : +Voici un exemple de code utilisé pour une barre de progression en HTML5 : ```html <!DOCTYPE html> @@ -139,11 +139,11 @@ Voici un exemple de code utilisé pour une barre de progression en HTML5 : <body> <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> <button id="update-button">Actualiser</button> - </body> + </body> </html> ``` -… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : +… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : ```js var progressBar = document.getElementById("progress-bar"); @@ -175,7 +175,7 @@ function updateProgress(percentComplete) { } function initDemo() { - setupProgress(); // Setup the progress bar. + setupProgress(); // Setup the progress bar. // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%. document.getElementById("update-button").addEventListener("click", function (e) { @@ -186,44 +186,44 @@ function initDemo() { initDemo(); ``` -## Comment fonctionnent les technologies d’assistance ? +## Comment fonctionnent les technologies d’assistance ? Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page. ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau. -## Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ? +## Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ? -Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : +Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : - _Object Inspector_ sur Windows -- _Accessibility Inspector_ sur Mac OS X +- _Accessibility Inspector_ sur Mac OS X - _AccProbe_ sur Linux - _Inspecteur DOM_ de Firebug - L’[_Inspecteur d’accessibilité_ de Firebug](http://code.google.com/p/ainspector/) -Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : +Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : - [Orca](http://live.gnome.org/Orca) pour Linux - [NVDA](http://www.nvda-project.org/) pour Windows -- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X +- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X -Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : +Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : 1. Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien. 2. L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité. -Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : +Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : - [Yahoo!'s ARIA bookmarklets](http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html) - [simple accessibility evaluation techniques](http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol) du _Fluid Project_ (techniques simples d’évaluation de l’accessibilité) -## Où se tiennent les discussion concernant ARIA ? +## Où se tiennent les discussion concernant ARIA ? - [Liste de diffusion Wai-xtech](http://lists.w3.org/Archives/Public/wai-xtech/) – Discussions sur les spécification d’ARIA. - [groupe Google Free-ARIA](http://groups.google.com/group/free-aria) – pour les développeurs et les utilisateurs d’outils et de ressources libres. -## Où peut-on en apprendre davantage à propos d’ARIA ? +## Où peut-on en apprendre davantage à propos d’ARIA ? - [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles) - [Formulaires accessibles](/fr/docs/Accessibilité/Formulaires_accessibles) diff --git a/files/fr/web/accessibility/community/index.md b/files/fr/web/accessibility/community/index.md index 28cadcb774..b103d1dcc2 100644 --- a/files/fr/web/accessibility/community/index.md +++ b/files/fr/web/accessibility/community/index.md @@ -8,7 +8,7 @@ original_slug: Accessibilité/Communauté --- Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité. -Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. +Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. - [Newsgroup Mozilla Accessibility](news://news.mozilla.org/netscape.public.mozilla.accessibility) - [Liste de discussion du groupe WAI](http://www.w3.org/WAI/IG/) diff --git a/files/fr/web/accessibility/index.md b/files/fr/web/accessibility/index.md index fe021c34d4..f80a84387a 100644 --- a/files/fr/web/accessibility/index.md +++ b/files/fr/web/accessibility/index.md @@ -11,9 +11,9 @@ original_slug: Accessibilité --- L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible. -« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) +« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) -« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) +« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) ## Tutoriels clefs @@ -28,7 +28,7 @@ La documentation MDN [Accessibilité](/fr/docs/Accessibilit%C3%A9) contient des - [Les bases de WAI-ARIA](/fr/docs/Apprendre/a11y/WAI-ARIA_basics) - : Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité. - [Multimédia accessible](/fr/docs/Apprendre/a11y/Multimedia) - - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. + - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. - [Accessibilité sur mobile](/fr/docs/Apprendre/a11y/Mobile) - : Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles. diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md index 51dce2b52b..375d170948 100644 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -8,21 +8,21 @@ tags: translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier --- -### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier +### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier Un nombre croissant d'applications Web utilise [JavaScript](fr/JavaScript) pour imiter des contrôles ( _widgets_ ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des `<div>` et autres `<span>` stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte. -Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. +Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. -Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). +Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). -### La solution : modifier le comportement standard de `tabindex` +### La solution : modifier le comportement standard de `tabindex` Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut `tabindex` pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le [système d'IE pour `tabindex`](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp), il devient possible de permettre aux contrôles [DHTML](fr/DHTML), déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles. -Le tableau qui suit décrit le nouveau comportement de `tabindex` : +Le tableau qui suit décrit le nouveau comportement de `tabindex` : | Attribut `tabindex` | Focus disponible à la souris ou par JavaScript via `element.focus()` | Navigable avec tabulation | | ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -55,7 +55,7 @@ Ceci peut être utile à réaliser si un contrôle personnalisé devient actif o #### Utilisation de `setTimeout` avec `element.focus()` pour donner le focus -N'utilisez pas `createEvent()`, `initEvent()` et `dispatchEvent()` pour donner le focus à un élément, parce que les évènements DOM `focus` sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci : +N'utilisez pas `createEvent()`, `initEvent()` et `dispatchEvent()` pour donner le focus à un élément, parce que les évènements DOM `focus` sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci : setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale @@ -73,7 +73,7 @@ IE ne déclenchera pas les évènements `keypress` pour les touches non alphanum #### Empêcher les évènements clavier d'effectuer des fonctions du navigateur -Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit : +Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit : <span tabindex="-1" onkeydown="return handleKeyDown();"> diff --git a/files/fr/web/accessibility/understanding_wcag/index.md b/files/fr/web/accessibility/understanding_wcag/index.md index ba30a69747..1ea3245c6a 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.md +++ b/files/fr/web/accessibility/understanding_wcag/index.md @@ -41,8 +41,8 @@ WCAG 2.1 comprend: - En savoir plus sur WCAG 2.1: - - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) - - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) + - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) + - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) ## Statut juridique diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md index 819174941c..fd481ec1ab 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -101,7 +101,7 @@ div { } .mauvais { - background-color: #400064; + background-color: #400064; } ``` diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md index 2802c59a02..f1ce8f89f6 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md @@ -16,7 +16,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable --- This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the **Perceivable** principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses. -> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) +> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) ## Guideline 1.1 — Providing text alternatives for non-text content @@ -32,7 +32,7 @@ The key here is that text can be converted to other forms people with disabiliti </thead> <tbody> <tr> - <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> <td> All images that convey meaningful content should be given suitable alternative text. @@ -70,7 +70,7 @@ The key here is that text can be converted to other forms people with disabiliti </td> <td> <p> - See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" >Text alternatives</a > for static caption options, and @@ -111,7 +111,7 @@ The key here is that text can be converted to other forms people with disabiliti Decorative images should be implemented using CSS background images (see <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a - >). If you have to include an image via an + >). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc. @@ -150,7 +150,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als video-only media (i.e. silent video). </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -193,7 +193,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als full content from the audio alone. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -206,7 +206,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -217,7 +217,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als where the existing audio does not convey the full meaning expressed by the video. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -227,7 +227,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als An equivalent sign language video should be provided for any prerecorded content containing audio. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -240,7 +240,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als should be provided that includes inserted pauses (and audio descriptions). </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -253,7 +253,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -268,7 +268,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als the content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -294,7 +294,7 @@ This guideline refers to the ability of content to be consumed by users in multi <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> <td> <p> - Any content structure — or visual relationship made between content — + Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are: </p> @@ -313,7 +313,7 @@ This guideline refers to the ability of content to be consumed by users in multi inferred even if you can't see the image. </li> <li> - Lists — if the order of list items is important, and ordered list + Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}). </li> </ul> @@ -390,7 +390,7 @@ This guideline refers to the ability of content to be consumed by users in multi </p> </div> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -410,26 +410,25 @@ This guideline refers to the ability of content to be consumed by users in multi <p> <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" >Understanding Orientation</a - > + > </p> </td> </tr> <tr> <td colspan="1"> - 1.3.5 Identify Input Purpose (AA) <em + 1.3.5 Identify Input Purpose (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em > </td> <td> - <p> </p> <p> Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes" >53 input fields</a > - to programmatically identify the purpose of a field. + to programmatically identify the purpose of a field. </p> </td> <td> @@ -441,7 +440,7 @@ This guideline refers to the ability of content to be consumed by users in multi </tr> <tr> <td colspan="1"> - 1.3.6 Identify Purpose (AAA) <em + 1.3.6 Identify Purpose (AAA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -547,7 +546,7 @@ This guideline relates to making sure core content is easy to discernable from b This means that designs should be responsive, so that when the text size is increased, the content is still accessible. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.5 Images of text (AA)</td> @@ -556,7 +555,7 @@ This guideline relates to making sure core content is easy to discernable from b job. For example, if an image is mostly textual, it could be represented using text as well as images. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> @@ -587,7 +586,7 @@ This guideline relates to making sure core content is easy to discernable from b Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.8 Visual presentation (AAA)</td> @@ -615,7 +614,7 @@ This guideline relates to making sure core content is easy to discernable from b </li> </ul> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> @@ -624,11 +623,11 @@ This guideline relates to making sure core content is easy to discernable from b decoration (i.e. it does not convey any content), or cannot be presented in any other way. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> - 1.4.10 Reflow (AA) <em + 1.4.10 Reflow (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -638,7 +637,7 @@ This guideline relates to making sure core content is easy to discernable from b <ul> <li> No horizontal scrolling for right-to-left languages (like English) - or left-to-right languages (like Arabic) + or left-to-right languages (like Arabic) </li> <li> No vertical scrolling for top-to-bottom languages (like Japanese) @@ -657,7 +656,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.11 Non-Text Contrast(AA) <em + 1.4.11 Non-Text Contrast(AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -665,7 +664,7 @@ This guideline relates to making sure core content is easy to discernable from b </td> <td> Minimum color contrast ratio of 3 to 1 for user interface components and - graphical objects. + graphical objects. </td> <td> <a @@ -676,7 +675,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.12 Text Spacing (AA) <em + 1.4.12 Text Spacing (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -685,7 +684,7 @@ This guideline relates to making sure core content is easy to discernable from b <td> <p> No loss of content or functionality occurs when the following styles - are applied: + are applied: </p> <ul> <li> @@ -708,7 +707,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.13 Content on Hover or Focus (AA) <em + 1.4.13 Content on Hover or Focus (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -724,7 +723,7 @@ This guideline relates to making sure core content is easy to discernable from b <li>dismissable (can be closed/removed)</li> <li> hoverable (the additional content does not disappear when the - pointer is over it) + pointer is over it) </li> <li> persistent (the additional content does not disappear without user diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md index e45e67e308..7da599f489 100644 --- a/files/fr/web/api/abortsignal/index.md +++ b/files/fr/web/api/abortsignal/index.md @@ -35,7 +35,7 @@ Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[ Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}. -Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. +Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. ```js var controller = new AbortController(); @@ -56,8 +56,8 @@ function fetchVideo() { fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { - reports.textContent = 'Download error: ' + e.message; - }) + reports.textContent = 'Download error: ' + e.message; + }) } ``` diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md index 1b030e1dbf..698ec6b96b 100644 --- a/files/fr/web/api/analysernode/analysernode/index.md +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -22,7 +22,7 @@ Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048. - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30. - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100. - - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 + - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 ## Spécifications diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 8016e057f1..1c06163251 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -25,7 +25,7 @@ Un nombre entier non signé. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -42,47 +42,47 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurTranche; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.beginPa + + var largeurTran + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.lin + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md index 003229afbe..59be1b7129 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.md +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -21,7 +21,7 @@ Un nombre entier non signé. ## Example -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -39,25 +39,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre; + } }; dessiner(); @@ -67,7 +67,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md index 13b054ee57..a41964d7fd 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -28,7 +28,7 @@ Un {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -77,7 +77,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 7d1f2801af..38997fa346 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -45,40 +45,40 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurBarre; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.begin + + var largeurBarr + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.l + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Paramètres @@ -90,7 +90,7 @@ function dessiner() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md index 0cc626b2f2..9c33179bb1 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -33,7 +33,7 @@ analyseur.getByteTimeDomainData(tableauDonnees); ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -78,7 +78,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md index 1388f536b1..451478a649 100644 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Float32Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -86,7 +86,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md index efe440936e..116f1d5cca 100644 --- a/files/fr/web/api/analysernode/index.md +++ b/files/fr/web/api/analysernode/index.md @@ -89,7 +89,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. > **Note :** Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations. -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -148,7 +148,7 @@ function dessiner() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md index 8273d1f001..646242d1de 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.md +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AnalyserNode/maxDecibels --- {{ APIRef("Web Audio API") }} -La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. +La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. Sa valeur par défaut est `-30`. @@ -25,7 +25,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -43,25 +43,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -71,7 +71,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md index 82ff0bcbe6..170049e2bc 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.md +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -26,7 +26,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md index 627d35e4b5..ab59d2fcc2 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -27,7 +27,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). `Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants. @@ -48,25 +48,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -76,7 +76,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md index b10f31a267..a605ca2cab 100644 --- a/files/fr/web/api/animationevent/animationevent/index.md +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -20,7 +20,7 @@ Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEv - `type` - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`. - `animationName` {{optional_inline}} - - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. + - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. - `elapsedTime` {{optional_inline}} - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évènement est déclenché, excluant le temps de pause des animations. Pour un évènement `animationstart`, `elapsedTime` est de `0.0` jusqu'à ce qu'il y ait une valeur négative pour une valeur [`animation-delay`](/fr/docs/Web/CSS/animation-delay), dans le cas où l'évènement est déclenché par `elapsedTime` contenant `(-1 * délai)`. Sa valeur par défaut vaut `0.0`. - `pseudoElement` {{optional_inline}} diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md index d99df91aed..93237800b6 100644 --- a/files/fr/web/api/atob/index.md +++ b/files/fr/web/api/atob/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob {{APIRef ("HTML DOM")}} La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31. -Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). +Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). ## Syntaxe @@ -32,10 +32,10 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs @@ -44,6 +44,6 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e ## Voir aussi - [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding) -- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) - {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}} - [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md index 18a5761fb2..fe4217cc98 100644 --- a/files/fr/web/api/attr/index.md +++ b/files/fr/web/api/attr/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Attr --- {{APIRef("DOM")}} -Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. +Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. > **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète. @@ -27,7 +27,7 @@ Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupa - : L'élément contenant l'attribut. > **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés. -> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. +> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. > > Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}. @@ -47,11 +47,11 @@ Les propriétés suivantes ont été dépréciées. Si elle est disponible, la m - `attributes` - : Cette propriété retourne désormais toujours `NULL`. - `childNodes` {{deprecated_inline}} - - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. + - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. - `firstChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `isId` {{readOnlyInline}} - - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. + - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. - `lastChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `nextSibling` diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md index a2f6f2e717..c5822f88a8 100644 --- a/files/fr/web/api/attr/localname/index.md +++ b/files/fr/web/api/attr/localname/index.md @@ -24,7 +24,7 @@ Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la parti ## Exemple -Cet exemple affiche "id" dans une fenêtre d'alerte. +Cet exemple affiche "id" dans une fenêtre d'alerte. ### Contenu HTML @@ -37,8 +37,8 @@ Cet exemple affiche "id" dans une fenêtre d'alerte. ```js const element = document.querySelector("#exemple"); element.addEventListener("click", function() { - const attribute = element.attributes[0]; - alert(attribute.localName); + const attribute = element.attributes[0]; + alert(attribute.localName); }); ``` @@ -48,7 +48,7 @@ element.addEventListener("click", function() { Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents. -> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. +> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. ## Spécifications diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md index a8d555f0d8..fc2f9b613f 100644 --- a/files/fr/web/api/attr/namespaceuri/index.md +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Attr/namespaceURI --- {{APIRef("DOM")}} -La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. +La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. > **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}. diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md index 1d03f31444..c992a8a6c3 100644 --- a/files/fr/web/api/attr/prefix/index.md +++ b/files/fr/web/api/attr/prefix/index.md @@ -20,7 +20,7 @@ La propriété **`Attr.prefix`** en lecture seule renvoie le préfixe de l'espac ## Exemples -Le code suivant affiche "x" dans la console. +Le code suivant affiche "x" dans la console. ```xml <div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> @@ -40,7 +40,7 @@ Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est u {{Compat("api.Attr.prefix")}} -## Voir également +## Voir également - {{domxref("Attr.namespaceURI")}} - {{domxref("Attr.localName")}} diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md index cb565da1f0..b0fbd82bf6 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -14,13 +14,13 @@ Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer" ### Parameters -- *context* {{obsolete_inline("")}} +- *context* {{obsolete_inline("")}} - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails. - _options_ {{optional_inline}} - : Les options sont les suivantes: - - `length`: Longueur de l'échantillonnage du tampon. + - `length`: Longueur de l'échantillonnage du tampon. - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1. - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md index e1f8192f4e..30a1e1460d 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -21,9 +21,9 @@ La méthode `copyFromChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/ - _destination_ - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel_ {{optional_inline}} - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -37,7 +37,7 @@ tableauDonnees.copyFromChannel(autreTableau,1,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md index f79f773a66..d286ff6953 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.md +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -16,9 +16,9 @@ La méthode `copyToChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/Au - _source_ - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel {{optional_inline}}_ - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -35,7 +35,7 @@ tableauDonnees.copyToChannel (autreTableau,0,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md index ffb7fdaeae..eb1d525a24 100644 --- a/files/fr/web/api/audiobuffer/duration/index.md +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/duration --- {{ APIRef("Web Audio API") }} -La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. +La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. ## Syntaxe @@ -49,7 +49,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md index 65aebfbe38..effed34d1e 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.md +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -76,7 +76,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md index b914ca7a11..f169cfb03b 100644 --- a/files/fr/web/api/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/index.md @@ -24,7 +24,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér - {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}} - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.length")}} {{readonlyInline}} - - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. + - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.duration")}} {{readonlyInline}} - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}} @@ -41,7 +41,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér ## Exemple -L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. +L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. ```js // Stéréo diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md index eae0885d58..9d5afff0ae 100644 --- a/files/fr/web/api/audiobuffer/length/index.md +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md index 0c7c2c1ced..79fe72e863 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.md +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md index 7992a06828..642b0a5847 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.md +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/sampleRate --- {{ APIRef("Web Audio API") }} -La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. +La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. ## Syntaxe @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des Navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md index 457bab06ba..e50db05366 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.md +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/AudioBufferSourceNode/detune --- {{ APIRef("Web Audio API") }} -La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). +La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Ses valeur sont comprises entre -1200 et 1200. @@ -55,7 +55,7 @@ source.start(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md index dc6a45fbba..3b7e2bbbba 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.md +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -52,7 +52,7 @@ _Hérite des propriétés de son parent, {{domxref("AudioNode")}}._ - {{domxref("AudioBufferSourceNode.buffer")}} - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0). - {{domxref("AudioBufferSourceNode.detune")}} - - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. + - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. - {{domxref("AudioBufferSourceNode.loop")}} - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`. - {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}} diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md index 1061a4924d..58907ea399 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBufferSourceNode/loop --- {{ APIRef("Web Audio API") }} -La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. +La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. La valeur par défaut de la propriété `loop` est `false`. @@ -30,9 +30,9 @@ Lorsque la lecture en boucle est activée, le son commence à jouer au point sp ## Exemple -Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. -> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) +> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) ```js function getData() { @@ -75,7 +75,7 @@ play.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md index b9aa87e87a..2cfb5c9c90 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -82,7 +82,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index ae8a799ba5..0279ecf959 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -27,46 +27,46 @@ Lorsque la lecture de la source audio est terminée, elle boucle. Il est possibl ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } ... loopstartControl.oninput = function() { - source.loopStart = loopstartControl.value; - loopstartValue.innerHTML = loopstartControl.value; + source.loopStart = loopstartControl.value; + loopstartValue.innerHTML = loopstartControl.value; } loopendControl.oninput = function() { - source.loopEnd = loopendControl.value; - loopendValue.innerHTML = loopendControl.value; + source.loopEnd = loopendControl.value; + loopendValue.innerHTML = loopendControl.value; } ``` @@ -74,7 +74,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index 347b485bd8..ff2be37ab8 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate --- {{ APIRef("Web Audio API") }} -La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. +La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie. @@ -41,34 +41,34 @@ Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est ut ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } // connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture @@ -96,7 +96,7 @@ playbackControl.oninput = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md index 0e7d5900dd..bdecb2a17a 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.md +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -53,7 +53,7 @@ source.start(contexteAudio.currentTime + 1,3,10); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md index 298453e5e9..0bc60cfad5 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -70,13 +70,13 @@ source.connect(gainNode); gainNode.connect(audioCtx.destination); ``` -> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. +> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md index e855ad68ed..33742d8aef 100644 --- a/files/fr/web/api/audiocontext/index.md +++ b/files/fr/web/api/audiocontext/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/AudioContext --- {{APIRef("Web Audio API")}} -L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. +L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}. @@ -33,7 +33,7 @@ Un contexte audio peut être la cible d'événements, par conséquent il implém <!----> - {{domxref("AudioContext.listener")}} {{readonlyInline}} - - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. <!----> @@ -56,35 +56,35 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.close()")}} - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait. - {{domxref("AudioContext.createBuffer()")}} - - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} + - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} - {{domxref("AudioContext.createBufferSource()")}} - - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. + - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. - {{domxref("AudioContext.createMediaElementSource()")}} - - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. + - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. - {{domxref("AudioContext.createMediaStreamSource()")}} - - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. + - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. - {{domxref("AudioContext.createMediaStreamDestination()")}} - - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. + - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. - {{domxref("AudioContext.createScriptProcessor()")}} - - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. + - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. - {{domxref("AudioContext.createStereoPanner()")}} - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio. - {{domxref("AudioContext.createAnalyser()")}} - - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. + - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. <!----> - {{domxref("AudioContext.createBiquadFilter()")}} - - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. + - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. <!----> - {{domxref("AudioContext.createChannelMerger()")}} - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux. - {{domxref("AudioContext.createChannelSplitter()")}} - - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. + - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. - {{domxref("AudioContext.createConvolver()")}} - - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. + - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. - {{domxref("AudioContext.createDelay()")}} - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également - {{domxref("AudioContext.createDynamicsCompressor()")}} @@ -94,36 +94,36 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.createIIRFilter()")}} - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs. - {{domxref("AudioContext.createOscillator()")}} - - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. + - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. - {{domxref("AudioContext.createPanner()")}} - - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. + - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. - {{domxref("AudioContext.createPeriodicWave()")}} - - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. + - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. - {{domxref("AudioContext.createWaveShaper()")}} - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires. - {{domxref("AudioContext.createAudioWorker()")}} - - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. + - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. - {{domxref("AudioContext.decodeAudioData()")}} - - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. + - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. - {{domxref("AudioContext.resume()")}} - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu. - {{domxref("AudioContext.suspend()")}} - - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. + - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. ## Méthodes obsolètes - {{domxref("AudioContext.createJavaScriptNode()")}} - - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. + - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. - {{domxref("AudioContext.createWaveTable()")}} - - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. ## Exemples -Déclaration basique d'un audio context : +Déclaration basique d'un audio context : var contexteAudio = new AudioContext; -Variante avec gestion de la compatibilité navigateur: +Variante avec gestion de la compatibilité navigateur: var AudioContext = window.AudioContext || window.webkitAudioContext; var contexteAudio = new AudioContext(); @@ -137,7 +137,7 @@ Variante avec gestion de la compatibilité navigateur: | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index 3b0e48616a..225e9b0519 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -20,7 +20,7 @@ Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il _Hérite des propriétés de son parent,_ `AudioNode`. -> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. +> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. - {{domxref("AudioListener.positionX")}} - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. @@ -29,11 +29,11 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.positionZ")}} - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. - {{domxref("AudioListener.forwardX")}} - - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardY")}} - - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardZ")}} - - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upX")}} - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upY")}} @@ -48,7 +48,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.setOrientation()")}} - : Définit l'orientation de l'auditeur. - {{domxref("AudioListener.setPosition()")}} - - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. + - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. ## Fonctionnalités obsolètes @@ -57,7 +57,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. -Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : +Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : - Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. - Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. @@ -73,7 +73,7 @@ C'est la raison pour laquelle elles ont été supprimées. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md index c5278ad884..3384e4abd1 100644 --- a/files/fr/web/api/audionode/index.md +++ b/files/fr/web/api/audionode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioNode --- {{ APIRef("Web Audio API") }} -L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. +L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. {{InheritanceDiagram}} @@ -13,7 +13,7 @@ L'interface **`AudioNode`** est une interface générique pour représenter un m Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_. Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part). -Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). +Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). > **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}. @@ -78,7 +78,7 @@ oscillator.channelCount; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md index 22f7c0be03..57ee5cf3f5 100644 --- a/files/fr/web/api/audioparam/index.md +++ b/files/fr/web/api/audioparam/index.md @@ -26,16 +26,16 @@ Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit _Hérite des propriétés de son parent, `AudioNode`._ - {{domxref("AudioParam.defaultValue")}} {{readonlyInline}} - - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. -- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} - - : Valeur maximum de la plage nominale (effective). + - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. +- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} + - : Valeur maximum de la plage nominale (effective). - {{domxref("AudioParam.minValue")}} {{readonlyinline}} - - : Valeur minimum de la plage nominale (effective). + - : Valeur minimum de la plage nominale (effective). <!----> - {{domxref("AudioParam.value")}} - - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception + - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception ## Méthodes @@ -86,7 +86,7 @@ biquadFilter.gain.value = 25; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md index 430bfcbc74..8cde56f04e 100644 --- a/files/fr/web/api/audioprocessingevent/index.md +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -32,7 +32,7 @@ _La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md index 61afaee4f6..9cfe9e45a7 100644 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData --- {{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}} -La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : +La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : - l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_) - un compteur de signature diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md index e87275b3eb..3aba8b3fb6 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -94,7 +94,7 @@ source.start(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md index 0dcba996f1..30b1c9f889 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.md +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/AudioContext/createGain --- {{ APIRef("Web Audio API") }} -La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. +La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. ## Syntaxe @@ -31,9 +31,9 @@ Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio e ## Exemple -L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. +L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. -L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) +L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) ```html <div> @@ -91,7 +91,7 @@ function couperSon () { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md index 8df75e0fb7..6b8d1fd985 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -69,7 +69,7 @@ Ici, nous créons une `PeriodicWave` avec deux valeurs. La première est le déc La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec `createPeriodicWave()`, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale. -Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. +Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}</annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. ## Spécifications diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md index 46c7e5d6af..14cf321b67 100644 --- a/files/fr/web/api/baseaudiocontext/index.md +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -30,7 +30,7 @@ Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l - {{domxref("BaseAudioContext.listener")}} {{readonlyInline}} - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. - {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}} - - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. + - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. - {{domxref("BaseAudioContext.state")}} {{readonlyInline}} - : Renvoie l'état actuel de l'`AudioContext`. @@ -80,7 +80,7 @@ _Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}} - {{domxref("BaseAudioContext.createWaveShaper()")}} - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires. - {{domxref("BaseAudioContext.decodeAudioData()")}} - - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. + - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. - {{domxref("BaseAudioContext.resume()")}} - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause. diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md index 550a287720..d4db93538f 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.md +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/BiquadFilterNode/frequency --- {{ APIRef("Web Audio API") }} -La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). +La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage. @@ -58,7 +58,7 @@ filtreBiquad.gain.value = 25; | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | -| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index f0e40607c6..e641539367 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -40,7 +40,7 @@ L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, c ## Constructeur - {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}} - - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. + - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. ## Propriétés @@ -73,13 +73,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>lowpass</code></th> <td> - Filtre standard passe-bas résonnant de second ordre avec atténuation de + Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut </td> <td>Non utilisé</td> @@ -87,13 +87,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>highpass</code></th> <td> - Filtre standard passe-haut résonnant de second ordre avec atténuation de + Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut </td> <td>Non utilisé</td> @@ -101,13 +101,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>bandpass</code></th> <td> - Filtre standard passe-bande de second ordre. Les fréquences en dehors de + Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées. </td> <td>Le centre de la gamme de fréquences.</td> <td> - Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande. </td> <td>Non utilisé</td> @@ -193,7 +193,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. </td> <td> Contrôle finement la transition à la fréquence moyenne. Plus ce - paramètre est grand, plus la transition est fine et large. + paramètre est grand, plus la transition est fine et large. </td> <td>Non utilisé</td> </tr> @@ -205,7 +205,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. - {{domxref("BiquadFilterNode.getFrequencyResponse()")}} - - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. + - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. ## Exemples diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md index 166428cb4a..ab9702f672 100644 --- a/files/fr/web/api/blob/type/index.md +++ b/files/fr/web/api/blob/type/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Blob/type --- {{APIRef("File API")}} -La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. +La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. ## Syntaxe diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md index c976b80341..c2d7b24434 100644 --- a/files/fr/web/api/blobevent/blobevent/index.md +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -23,7 +23,7 @@ _Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event - `data` - : est un {{domxref("Blob")}} associé à l'évènement. -- `timecode` {{optional_inline}} +- `timecode` {{optional_inline}} - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob. ## Spécifications diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md index 4a808ec8e8..303f6a426f 100644 --- a/files/fr/web/api/btoa/index.md +++ b/files/fr/web/api/btoa/index.md @@ -27,11 +27,11 @@ La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en ### Paramètres - `chaineAEncoder` - - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. + - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. ### Valeur retournée -Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. +Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ### Exceptions @@ -42,15 +42,15 @@ Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ## Notes -Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. +Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. `btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants. ## Chaînes Unicode -Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. +Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. -Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : +Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : // Chaîne ucs-2 en ascii encodé en base64 function uena(chn) { @@ -67,16 +67,16 @@ Une option est d'échapper tous les caractères étendus, de telle sorte que la uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!" -Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). +Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md index bb85f96fbb..fa09e9119d 100644 --- a/files/fr/web/api/cache/add/index.md +++ b/files/fr/web/api/cache/add/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/add --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : +La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : ```js fetch(url).then(function(response) { @@ -26,9 +26,9 @@ fetch(url).then(function(response) { }) ``` -Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. +Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. -> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. ## Syntaxe @@ -41,11 +41,11 @@ cache.add(request).then(function() { ### Paramètres - request - - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. + - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -61,12 +61,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -76,7 +76,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## Exemples -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. ```js this.addEventListener('install', function(event) { @@ -100,6 +100,6 @@ this.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md index 8a666d32cb..eb2a10faa3 100644 --- a/files/fr/web/api/cache/addall/index.md +++ b/files/fr/web/api/cache/addall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/addAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. +La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. > **Note :** `addAll()` écrasera toute paire clé/valeur précédemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put()` ainsi créée devrait engendrer l'effacement d'une entrée cache créée par la même méthode `addAll()`. @@ -30,11 +30,11 @@ cache.addAll(requests[]).then(function() { ### Paramètres - requests - - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. + - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -50,12 +50,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -65,7 +65,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## **Exemples** -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. ```js this.addEventListener('install', function(event) { diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md index 1409dbfa4b..4df36f3506 100644 --- a/files/fr/web/api/cache/delete/index.md +++ b/files/fr/web/api/cache/delete/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Cache/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. +La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. ## Syntaxe @@ -30,22 +30,22 @@ cache.delete(request,{options}).then(function(true) { - : La {{domxref("Request", "Requête")}} à supprimer. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. +Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. ## Exemples ```js caches.open('v1').then(function(cache) { - cache.delete('/images/image.png').then(function(response) { + cache.delete('/images/image.png').then(function(response) { someUIUpdateFunction(); }); }) diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md index b53c794c91..a0b3412313 100644 --- a/files/fr/web/api/cache/index.md +++ b/files/fr/web/api/cache/index.md @@ -34,7 +34,7 @@ Vous êtes également responsable de la purge périodique des entrées du cache. - {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}} - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}. - {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}} - - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. + - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. - {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}} - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné. - {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}} @@ -52,9 +52,9 @@ Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")} Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié. -Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. +Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. -> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. +> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. ```js var CACHE_VERSION = 1; diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md index 617e1aa4e7..dc647de935 100644 --- a/files/fr/web/api/cache/keys/index.md +++ b/files/fr/web/api/cache/keys/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Cache/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. Les requêtes sont retournées dans le même ordre que l'ordre d'insertion. -> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. +> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. ## Syntaxe @@ -34,16 +34,16 @@ cache.keys(request,{options}).then(function(response) { - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. ## Exemples diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md index 592ec9f804..d1e360a09b 100644 --- a/files/fr/web/api/cache/match/index.md +++ b/files/fr/web/api/cache/match/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. +La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. ## Syntaxe @@ -28,28 +28,28 @@ cache.match(request,{options}).then(function(response) { ### Paramètres - request - - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. + - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. - options {{optional_inline}} - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. -> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)). -L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. +L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. -Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. +Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md index 94f271b928..b1897ed646 100644 --- a/files/fr/web/api/cache/matchall/index.md +++ b/files/fr/web/api/cache/matchall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/matchAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. ## Syntaxe @@ -33,15 +33,15 @@ cache.matchAll(request,{options}).then(function(response) { - : Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md index d99f8d8bb7..fdfd705454 100644 --- a/files/fr/web/api/cache/put/index.md +++ b/files/fr/web/api/cache/put/index.md @@ -15,24 +15,24 @@ translation_of: Web/API/Cache/put --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. +La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. -Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : +Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : ```js fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('Bad response status'); - } + } return cache.put(url, response); }) ``` -> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. +> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. -> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. +> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. ## Syntaxe @@ -53,28 +53,28 @@ cache.put(request, response).then(function() { Une {{jsxref("Promise", "Promesse")}} est retournée avec void. -> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. +> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. ## Exemples -Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : +Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : -1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. -2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. +1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. +2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. 3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours. ```js var response; var cachedResponse = caches.match(event.request).catch(function() { - return fetch(event.request); + return fetch(event.request); }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); + response = r; + caches.open('v1').then(function(cache) { + cache.put(event.request, response); + }); + return response.clone(); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); + return caches.match('/sw-test/gallery/myLittleVader.jpg'); }); ``` diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md index abfb9936b2..a593d7c422 100644 --- a/files/fr/web/api/caches/index.md +++ b/files/fr/web/api/caches/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- {{APIRef()}}{{SeeCompatTable}} -La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. +La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. ## Syntaxe @@ -18,7 +18,7 @@ Un objet de type {{domxref("CacheStorage")}}. ## Exemple -L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. +L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. ```js this.addEventListener('install', function(event) { @@ -57,7 +57,7 @@ this.addEventListener('install', function(event) { <td>{{Spec2('Service Workers')}}</td> <td> <p> - Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la + Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec. </p> </td> diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index ba53d9e8d1..3be6f80cc2 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/CacheStorage/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. +La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,25 +30,25 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( - caches.keys().then(function(keyList) { - return Promise.all(keyList.map(function(key) { - if (cacheWhitelist.indexOf(key) === -1) { - return caches.delete(key); - } - })); - }) - ); + caches.keys().then(function(keyList) { + return Promise.all(keyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { + return caches.delete(key); + } + })); + }) + ); }); ``` diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index ae799a0f03..380f7678e8 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/has --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. +La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -27,23 +27,23 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Paramètres - cacheName - - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. + - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. ## Exemples -L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. +L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. ```js caches.has('v1').then(function() { caches.open('v1').then(function(cache) { - return cache.addAll(myAssets); + return cache.addAll(myAssets); }); }).catch(function() { - someCacheSetupfunction(); + someCacheSetupfunction(); });; ``` @@ -59,6 +59,6 @@ caches.has('v1').then(function() { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index f91758952d..8706641b1c 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -19,7 +19,7 @@ L'interface : - Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). - > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. + > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. - Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. @@ -29,34 +29,34 @@ Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Re Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. +> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. +> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. ## Méthodes - {{domxref("CacheStorage.match()")}} {{experimental_inline}} - - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. - {{domxref("CacheStorage.has()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. - {{domxref("CacheStorage.open()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). - {{domxref("CacheStorage.delete()")}} {{experimental_inline}} - - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. - {{domxref("CacheStorage.keys()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. ## Exemples -Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. +Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : +Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. -2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) -3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. +1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. +2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) +3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. -Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. +Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. ```js this.addEventListener('install', function(event) { @@ -86,9 +86,9 @@ self.addEventListener('fetch', function(event) { return response; } else { return fetch(event.request).then(function (response) { - // la réponse ne peut être utilisée qu'une seule fois - // nous devons sauvegarder le clone pour mettre - // une copie en cache et servir le second + // la réponse ne peut être utilisée qu'une seule fois + // nous devons sauvegarder le clone pour mettre + // une copie en cache et servir le second let responseClone = response.clone(); caches.open('v1').then(function (cache) { diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index 7980630510..127deabe0e 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,11 +30,11 @@ Aucun. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. +Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index c548c86759..0b1292ce4e 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. +La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -34,23 +34,23 @@ Les objets `Cache` sont cherchés par ordre de création. - : La {{domxref("Request", "Requête")}} recherchée. - options {{optional_inline}} - - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: + - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: - - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. ### Valeur retournée -Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. +Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. ## Exemples -Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: +Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. -2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. 3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. ```js @@ -91,6 +91,6 @@ self.addEventListener('fetch', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 009c6e1e94..a46a8d2094 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/CacheStorage/open --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. +La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. +> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. ## Syntaxe @@ -33,7 +33,7 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. +Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. ## Exemples @@ -70,6 +70,6 @@ self.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index 7096bbe6e5..7444fbcf91 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -18,13 +18,13 @@ Cet article fournit un exemple intéressant concret d'utilisation de l'élément **[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -## Pourquoi ? +## Pourquoi ? Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était **déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. La [présentation](/fr/docs/Web/API/Canvas_API) et le [tutoriel](/fr/docs/Web/API/Canvas_API/Tutorial) `canvas` que j'ai trouvé ici sur MDN sont excellents, mais personne n'a encore rien écrit sur l'animation. J'ai donc pensé porter un « raycaster » basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. -## Comment ? +## Comment ? L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 5dbc455c7e..66f1da8485 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -9,7 +9,7 @@ Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("ca Les applications Mozilla ont commencé à supporter `<canvas>` à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Mozilla/Firefox/Releases/1.5)). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte `<canvas>` depuis la version 9 et ultérieures ; pour les versions précédentes d'IE, une page peut effectuer ce support de `<canvas>` en incluant un script depuis le projet [« <i lang="en">Explorer Canvas</i> »](https://github.com/arv/explorercanvas) de Google. -L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. +L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. ## Exemple @@ -38,8 +38,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; @@ -88,7 +88,7 @@ window.addEventListener('load', drawCanvas); - {{domxref("OffscreenCanvas")}}{{experimental_inline}} - {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} -Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). +Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). {{domxref("CanvasCaptureMediaStream")}} est lié. @@ -115,26 +115,26 @@ Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebG ### Bibliothèques - [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG. -- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. -- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. +- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. +- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. - [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas. - [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger. -- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. -- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. -- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. -- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. -- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. -- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. -- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. +- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. +- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. +- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. +- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. +- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. +- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. +- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. - [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art -- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas -- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas ## Spécifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | ## Voir aussi diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index dc4e3366ba..f445394f18 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -146,7 +146,7 @@ Quand la routine est appelée, l'élément vidéo affiche les données de la plu La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData()` sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. -La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. +La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique. diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index be0df6f74b..7b678a522a 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -91,10 +91,10 @@ Si aucun test de collision n'est effectué, notre balle sort hors du canevas rap ```js if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; + ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; + ball.vx = -ball.vx; } ``` diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 31cf501014..b3cc9f0edc 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} -Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. +Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. ## Les couleurs @@ -19,7 +19,7 @@ Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dess `color` est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`). -> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. +> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur. @@ -250,7 +250,7 @@ Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). > > Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. @@ -258,20 +258,20 @@ Pour les lignes de largeur paire, chaque moitié finit par être un nombre entie Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2. -### Un exemple de `lineCap` +### Un exemple de `lineCap` -La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. +La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. - `butt` _(bout)_ - : L'extrémité des lignes est en angle droit. - `round` _(rond)_ - : Les extrémités sont arrondies. - `square` _(carré)_ - - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. + - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. -Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. +Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. -La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. +La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. ```js function draw() { @@ -310,16 +310,16 @@ draw(); {{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} -### Un exemple de `lineJoin` +### Un exemple de `lineJoin` -La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). +La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. +Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. - `round` _(rond)_ - - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. + - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. - `bevel` _(biseau)_ - - : Ajoute un triangle à l'extrémité commune des segments connectés. + - : Ajoute un triangle à l'extrémité commune des segments connectés. - `miter` _(onglet)_ - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. @@ -596,7 +596,7 @@ Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une coule Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} - - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : @@ -707,7 +707,7 @@ Nous allons regarder la propriété de la `font` _(police de caratères)_ et la ## Règles de remplissage Canvas -Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. +Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. Deux valeurs sont possibles : diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index a8b72b6e50..72075e3b32 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. +Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. @@ -28,7 +28,7 @@ Voici les étapes à suivre à chaque image dessinée (frame) : 3. **Dessiner les formes animées** Vous effectuez toutes les opérations pour afficher l'image. 4. **Restaurer l'état du canevas** - Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. + Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. ## Contrôle d'une animation @@ -226,9 +226,9 @@ window.requestAnimationFrame(clock); {{EmbedLiveSample("Une_horloge_animée", "180", "180")}} -## Un panorama défilant en boucle +## Un panorama défilant en boucle -Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. +Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. ```js var img = new Image(); @@ -318,7 +318,7 @@ function draw() { } ``` -En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. +En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. ```html <canvas id="canvas" width="800" height="200"></canvas> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index ca47946655..f391ead52a 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -58,7 +58,7 @@ Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...>< L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". +Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". ```js var canvas = document.getElementById('tutorial'); @@ -69,7 +69,7 @@ La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant ## Vérification de la prise en charge -Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : +Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : ```js var canvas = document.getElementById('tutorial'); @@ -110,7 +110,7 @@ Voici un modèle minimaliste, que nous allons utiliser comme point de départ da </html> ``` -Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. +Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. Voici à quoi le modèle ressemble : diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index e3343ba8a3..283e149ca1 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -25,11 +25,11 @@ Ce code configure les valeurs globales utilisées par le reste du programme. var canvas1 = document.createElement("canvas"); var canvas2 = document.createElement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', - 'destination-over','destination-in','destination-out','destination-atop', - 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', - 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', - 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' - ].reverse(); + 'destination-over','destination-in','destination-out','destination-atop', + 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ].reverse(); var gcoText = [ "C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.", "La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.", @@ -68,21 +68,21 @@ Quand la page se charge, le code suivant s'exécute pour configurer et exécuter ```js window.onload = function() { - // lum en sRGB - var lum = { - r: 0.33, - g: 0.33, - b: 0.33 - }; - // redimensionne le canvas - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix() - colorSphere(); - runComposite(); - return; + // lum en sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // redimensionne le canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix() + colorSphere(); + runComposite(); + return; }; ``` @@ -90,74 +90,74 @@ Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en ```js function createCanvas() { - var canvas = document.createElement("canvas"); - canvas.style.background = "url("+op_8x8.data+")"; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width/2; - canvas.height = height/2; - return canvas; + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; } function runComposite() { - var dl = document.createElement("dl"); - document.body.appendChild(dl); - while(gco.length) { - var pop = gco.pop(); - var dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - var dd = document.createElement("dd"); - var p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); - var canvasToDrawOn = createCanvas(); - var canvasToDrawFrom = createCanvas(); - var canvasToDrawResult = createCanvas(); + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); - var ctx = canvasToDrawResult.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawOn.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('existing content', 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawFrom.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('new content', 5, height/2 - 5); - ctx.restore(); - - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); - - dl.appendChild(dd); - } + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(canvas1, + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle + ctx.font = "14 + ctx.fillText(' + ctx.restore + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(c + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle = "# + ctx.font = "14p + x.fillText('new c + x.restore(); + + dd.appendChil + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } }; ``` @@ -167,59 +167,59 @@ Notre programme repose sur un certain nombbre de fonctions utilitaires: ```js var lightMix = function() { - var ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI*2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0,0,30,30) - ctx.fill(); + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); }; ``` ```js var colorSphere = function(element) { - var ctx = canvas1.getContext("2d"); - var width = 360; - var halfWidth = width / 2; - var rotate = (1 / 360) * Math.PI * 2; // per degree - var offset = 0; // scrollbar offset - var oleft = -20; - var otop = -20; - for (var n = 0; n <= 359; n ++) { - var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); - var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } - ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) - ctx.fill(); - return ctx.canvas; + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; }; ``` @@ -227,76 +227,76 @@ var colorSphere = function(element) { // HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { - var H = o.H / 360, - S = o.S / 100, - V = o.V / 100, - R, G, B; - var A, B, C, D; - if (S == 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H = 6 * H; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - (S * D))); - C = Math.round(255 * V * (1 - (S * (1 - D)))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } - } - return { - R: R, - G: G, - B: B - }; + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + se { + if (H >= 1 + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * + V = Math.round(255 * V); + switch (Mat + case 0: + R = V; + G = C; + B = A; + bre + 1: + R = B; + G = V; + B = A; + bre + 2: + R = A; + G = V; + B = C; + bre + 3: + R = A; + G = B; + B = V; + bre + 4: + R = C; + G = A; + B = V; + bre + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; }; var createInterlace = function (size, color1, color2) { - var proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // top-left - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // top-right - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // bottom-left - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // bottom-right - proto.fillRect(size, size, size, size); - var pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; }; var op_8x8 = createInterlace(8, "#FFF", "#eee"); diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index a38f95eadd..57d00b74d8 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -14,120 +14,120 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} -Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. +Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. ## La grille -Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut. +Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.  -## Dessin de rectangles +## Dessin de rectangles -Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. +Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. -Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : +Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : - {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}} - : Dessine un rectangle rempli. - {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}} - - : Dessine un contour rectangulaire + - : Dessine un contour rectangulaire - {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}} - - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. + - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. -Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. +Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. -Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. +Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. ### Exemple de forme rectangulaire ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.fillRect(25, 25, 100, 100); - ctx.clearRect(45, 45, 60, 60); - ctx.strokeRect(50, 50, 50, 50); - } + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } } ``` -Le résultat de cet exemple est montré ci-dessous. +Le résultat de cet exemple est montré ci-dessous. {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}} -La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. +La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. -Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. +Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas. -## Dessin de trajets +## Dessin de trajets -Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : +Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : 1. Tout d'abord, vous devez créer le trajet. -2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. +2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. 3. Finalement, vous devez fermer le trajet. -4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. +4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. -Voici les functions utilisées pour réaliser ces étapes : +Voici les functions utilisées pour réaliser ces étapes : - {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} - - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. + - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. - [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) - - : Méthodes pour définir différents trajets pour les objets. + - : Méthodes pour définir différents trajets pour les objets. - {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}} - - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. + - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. - {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} - - : Dessine la forme en traçant son contour. + - : Dessine la forme en traçant son contour. - {{domxref("CanvasRenderingContext2D.fill", "fill()")}} - - : Dessine une forme pleine en remplissant la zone de contenu du trajet. + - : Dessine une forme pleine en remplissant la zone de contenu du trajet. -La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. +La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. -> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. +> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt. -La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. +La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. -> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. +> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. ### Dessin d'un triangle -Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : +Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); - } + } } ``` @@ -137,28 +137,28 @@ Le résultat ressemble à : ### Déplacement du stylo -Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. +Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. - {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}} - : Déplace le stylo aux coordonnées `x` et `y`. -Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. +Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. -Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. +Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Cercle extérieur @@ -169,15 +169,15 @@ function draw() { ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Oeil droite ctx.stroke(); - } + } } ``` -Le résultat ressemble à ce qui suit : +Le résultat ressemble à ce qui suit : {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}} -Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. +Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. > **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous. @@ -186,107 +186,107 @@ Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes Pour dessiner des lignes droites, utilisez la méthode `lineTo()`. - {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}} - - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. + - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. -Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. +Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. L'exemple ci-dessous dessine deux triangles, un rempli et un filaire. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Triangle plein - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(105, 25); - ctx.lineTo(25, 105); - ctx.fill(); - - // Triangle filaire - ctx.beginPath(); - ctx.moveTo(125, 125); - ctx.lineTo(125, 45); - ctx.lineTo(45, 125); - ctx.closePath(); - ctx.stroke(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Triangle plei + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(1 + ctx.lineTo(2 + ctx.fill(); + + // Triangle filaire + ctx.beginPath(); + ctx.moveTo(125, 125) + ctx.lineTo(125, + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } } ``` -Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. +Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. {{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}} -Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. +Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. ### Les arcs -Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. +Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. - {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}} - - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). + - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). - **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}** - - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. + - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. -Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. +Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. -> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. +> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. -L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. +L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. -Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. +Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne. -L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. +L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. > **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="200"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="200"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - for(var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { - ctx.beginPath(); - var x = 25 + j * 50; // Coordonnée x - var y = 25 + i * 50; // Coordonnée y - var rayon = 20; // Rayon de l'arc - var angleInitial = 0; // Point de départ sur le cercle - var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle - var antihoraire = i % 2 != 0; // Horaire ou antihoraire - - ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire); - - if (i>1) { - ctx.fill(); - } else { - ctx.stroke(); - } - } - } - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + for(var i = 0; i < 4 + for(var j = 0; j < + ctx.beginPath(); + var x = 25 + j * 50; // Coordonné + var y = 25 + i * 50; // Coordonné + var rayon = 20; // Rayon de l'arc + var angleInitial = 0; // Point de départ sur le cercle + var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d + var antihoraire + + + + f + + + + + } + } + } } ``` @@ -294,22 +294,22 @@ function dessiner() { ### Les courbes quadratiques et de Bézier -Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. +Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}} - - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. + - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. - {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}} - - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). + - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). -La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle. +La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.  -Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. +Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. -Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. +Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. -Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. +Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. #### Courbes de Bézier quadratiques @@ -317,28 +317,28 @@ Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bu ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemples de courbes quadratiques - ctx.beginPath(); - ctx.moveTo(75, 25); - ctx.quadraticCurveTo(25, 25, 25, 62.5); - ctx.quadraticCurveTo(25, 100, 50, 100); - ctx.quadraticCurveTo(50, 120, 30, 125); - ctx.quadraticCurveTo(60, 120, 65, 100); - ctx.quadraticCurveTo(125, 100, 125, 62.5); - ctx.quadraticCurveTo(125, 25, 75, 25); - ctx.stroke(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemples de c + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100) + ctx.quadraticCurveTo(125, 100, 125, 62 + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); } } ``` @@ -347,32 +347,32 @@ function dessiner() { #### Les courbes de Bézier cubiques -Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. +Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemple de courbes cubiques - ctx.beginPath(); - ctx.moveTo(75, 40); - ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); - ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); - ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); - ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); - ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); - ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); - ctx.fill(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemple de co + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5 + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); } } ``` @@ -381,125 +381,125 @@ function dessiner() { ### Rectangles -En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. +En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. - {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}} - - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. + - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. -Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. +Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. ### Combiner les possibilités -Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. +Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - rectArrondi(ctx, 12, 12, 150, 150, 15); - rectArrondi(ctx, 19, 19, 150, 150, 9); - rectArrondi(ctx, 53, 53, 49, 33, 10); - rectArrondi(ctx, 53, 119, 49, 16, 6); - rectArrondi(ctx, 135, 53, 49, 33, 10); - rectArrondi(ctx, 135, 119, 25, 49, 10); - - ctx.beginPath(); - ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false); - ctx.lineTo(31, 37); - ctx.fill(); - - for(var i = 0; i< 8; i++) { - ctx.fillRect(51 + i * 16, 35, 4, 4); - } - - for(i = 0; i < 6; i++) { - ctx.fillRect(115, 51 + i * 16, 4, 4); - } - - for(i = 0; i < 8; i++) { - ctx.fillRect(51 + i * 16, 99, 4, 4); - } - - ctx.beginPath(); - ctx.moveTo(83, 116); - ctx.lineTo(83, 102); - ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); - ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); - ctx.lineTo(111, 116); - ctx.lineTo(106.333, 111.333); - ctx.lineTo(101.666, 116); - ctx.lineTo(97, 111.333); - ctx.lineTo(92.333, 116); - ctx.lineTo(87.666, 111.333); - ctx.lineTo(83, 116); - ctx.fill(); - - ctx.fillStyle = "white"; - ctx.beginPath(); - ctx.moveTo(91, 96); - ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); - ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); - ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); - ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); - ctx.moveTo(103, 96); - ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); - ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); - ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); - ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); - ctx.fill(); - - ctx.fillStyle = "black"; - ctx.beginPath(); - ctx.arc(101, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - - ctx.beginPath(); - ctx.arc(89, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + rectArrondi(ctx, 12, 12, 150, 150, 15 + rectArrondi(ctx, 19, 19, 150, 150, 9) + rectArrondi(ctx, 53, 53, 49, 33, 10); + rectArrondi(ctx, 53, 119, 49, 16, 6); + rectArrondi(ctx, 1 + rectArrondi(ctx, + + ctx.beginPath(); + ctx.arc(37, + ctx.lineTo(31, 37); + ctx.fill(); + + for(var i = 0; i< 8; i++ + + } + + for(i = 0; i < 6; i++) { + + } + + for(i = 0; i < 8; i+ + ctx.fillRect(51 + i * + } + + ctx.beginPat + ctx.moveTo(83, 116); + ctx.lineTo(83, 1 + ctx.bezierCurveTo(8 + ctx.bezierCurveTo(105, 88, 1 + ctx.lineTo(111, 116) + ctx.lineTo(1 + ctx.lineTo(101.666, + ctx.lineTo(97, 1 + ctx.lineTo(92.333, + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.moveTo(9 + ctx.bezierCurveT + ctx.bezierCurveTo(87, 103, 88, 106, 91, 10 + ctx.bezierCu + ctx.bezierCurveTo(95, 99 + ctx.moveTo(103, + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101) + ctx.bezierCu + ctx.bezierCurveT + ctx.bezierCurveTo(107, 99, 106, 96, 103, 9 + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.arc(101, + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } } // Une fonction utilitaire pour tracer des rectangles avec des coins arrondis function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { - ctx.beginPath(); - ctx.moveTo(x, y + rayon); - ctx.lineTo(x, y + hauteur - rayon); - ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); - ctx.lineTo(x + largeur - rayon, y + hauteur); - ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); - ctx.lineTo(x + largeur, y + rayon); - ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); - ctx.lineTo(x + rayon,y); - ctx.quadraticCurveTo(x, y, x, y + rayon); - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y + rayon); + ctx.lineTo(x, y + hauteur - rayon); + ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); + ctx.lineTo(x + largeur - rayon, y + hauteur); + ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); + ctx.lineTo(x + largeur, y + rayon); + ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); + ctx.lineTo(x + rayon,y); + ctx.quadraticCurveTo(x, y, x, y + rayon); + ctx.stroke(); } ``` -L'image résultante ressemble à ce qui suit : +L'image résultante ressemble à ce qui suit : {{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}} -Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. +Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. -Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. +Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. ## Objets Path2D Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet [`Path2D`](/fr/docs/Web/API/Path2D), disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instructions de dessin. Vous pourrez alors rejouer vos trajets rapidement. Voyons comment nous pouvons construire un objet `Path2D` : - {{domxref("Path2D.Path2D", "Path2D()")}} - - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). + - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). <!----> @@ -507,16 +507,16 @@ Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de tra new Path2D(trajet); // copie depuis un autre objet Path2D new Path2D(d); // trajet depuis des données de trajet SVG -Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. +Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. -L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. +L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. -- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} - - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. +- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} + - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. ### Exemple de Path2D -Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. +Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. ```html hidden <html> @@ -547,11 +547,11 @@ function dessiner() { {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}} -### Utilisation de trajets SVG +### Utilisation de trajets SVG -Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. +Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. -Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). +Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md index f6f3ba108f..42b11ed789 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -6,11 +6,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility --- {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} -L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. +L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. ## Moyen de repli -Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. +Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. ```html <canvas> @@ -25,11 +25,11 @@ Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilis </canvas> ``` -Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). +Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). ## Les règles ARIA -Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. +Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. ```html <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> @@ -37,16 +37,16 @@ Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/AR ## Zones cibles (hit Region) -Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). +Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Ajoute une "hit region" au canvas.. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. + - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Retire toutes les "hit regions" du cnavas. -Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. +Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. ```html <canvas id="canvas"></canvas> @@ -60,29 +60,29 @@ ctx.fill(); ctx.addHitRegion({id: 'circle'}); canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } + if (event.region) { + alert('hit region: ' + event.region); + } }); </script> ``` -La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): +La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): ```js ctx.addHitRegion({control: element}); ``` -Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). +Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). ## Focus rings -Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. +Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}} - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant. -De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. +De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}} - : Affiche le chemin courant ou le chemin donné. diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 7b3b723efb..ded7ba9431 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. +L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. ## Conseils sur les performances Ceci est une liste de conseils pour améliorer les performances -### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue. @@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, pr ### Redimensionner les canvas avec CSS transform -[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. ```js var scaleX = window.innerWidth / canvas.width; @@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; ``` -### Utiliser l'attribut `moz-opaque` (Gecko only) +### Utiliser l'attribut `moz-opaque` (Gecko only) Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 7c6fadf160..49b70c9c31 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -13,29 +13,29 @@ Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels d L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants : - `width` - - : La largeur de l'image en pixels. + - : La largeur de l'image en pixels. - `height` - - : La hauteur de l'image en pixels. + - : La hauteur de l'image en pixels. - `data` - - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). + - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). -La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. +La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. -Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. +Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. -Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : +Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : ```js composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; ``` -Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : +Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : ```js var nbOctets = imageData.data.length; ``` -## Création d'un objet `ImageData` +## Création d'un objet `ImageData` Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode [`createImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/createImageData). Il existe deux versions de la méthode `createImageData()` : @@ -43,9 +43,9 @@ Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode var monImageData = ctx.createImageData(largeur, hauteur); ``` -Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. +Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. -Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** +Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** ```js var monImageData = ctx.createImageData(autreImageData); @@ -53,17 +53,17 @@ var monImageData = ctx.createImageData(autreImageData); ## Obtention des données pixel pour un contexte -Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : +Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : ```js var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur); ``` -Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. +Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. -> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. +> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. -Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). +Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). ### Une pipette à couleur @@ -105,9 +105,9 @@ Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRende ctx.putImageData(monImageData, dx, dy); ``` -Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. +Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : +Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : ```js ctx.putImageData(monImageData, 0, 0); @@ -115,7 +115,7 @@ ctx.putImageData(monImageData, 0, 0); ### Niveaux de gris et inversion de couleurs -Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. +Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. ```html hidden <canvas id="canevas" width="300" height="227"></canvas> @@ -189,8 +189,8 @@ zoomctx.drawImage(canvas, <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> - <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> - Enable image smoothing + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing </label> </div> ``` diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md index 490e52c4fe..fa45263a14 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -190,7 +190,7 @@ Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons ### Un exemple `scale` -Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. +Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. ```js function draw() { diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index b4a77e50dc..dcacbfbe6e 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasGradient/addColorStop --- {{APIRef("Canvas API")}} -La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. +La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. ## Syntaxe @@ -26,9 +26,9 @@ La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini pa ## Exemples -### Utilisation de la méthode `addColorStop` +### Utilisation de la méthode `addColorStop` -Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. +Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md index be3e32d89c..d499735bee 100644 --- a/files/fr/web/api/canvasgradient/index.md +++ b/files/fr/web/api/canvasgradient/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/CanvasGradient --- {{APIRef("Canvas API")}} -L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. +L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. ## Propriétés @@ -20,16 +20,16 @@ _Représentant un objet opaque, il n'y a aucune propriété exposée._ ## Méthodes -_Il n'y a pas de méthode héritée._ +_Il n'y a pas de méthode héritée._ - {{domxref("CanvasGradient.addColorStop()")}} - - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. + - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -37,5 +37,5 @@ _Il n'y a pas de méthode héritée._ ## Voir également -- Créateur dans {{domxref("CanvasRenderingContext2D")}}. +- Créateur dans {{domxref("CanvasRenderingContext2D")}}. - L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 823c70dfc6..5c845f8199 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). +La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). ## Syntaxe @@ -16,19 +16,19 @@ La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajo - `x` - : La position en x du centre de l'arc. - `y` - - : La position en y du centre de l'arc. + - : La position en y du centre de l'arc. - `radius` _(rayon)_ - : Le rayon de l'arc. - `startAngle` _(angle départ)_ - - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `endAngle` _(angle fin)_ - - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `anticlockwise` _(sens anti-horaire)_ {{optional_inline}} - - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. + - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. ## Exemples -### En utilisant la méthode `arc` +### En utilisant la méthode `arc` Voici un code simple permettant de dessiner un cercle . @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -95,7 +95,7 @@ window.addEventListener("load", drawCanvas); ### Exemple avec différentes formes -Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. +Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. ```html hidden <canvas id="canvas" width="150" height="200"></canvas> @@ -133,7 +133,7 @@ for (var i = 0; i < 4; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -141,11 +141,11 @@ for (var i = 0; i < 4; i++) { ## Notes spécifiques à Gecko -Avec Gecko 2.0 {{geckoRelease("2.0")}}: +Avec Gecko 2.0 {{geckoRelease("2.0")}}: - Le paramètre `anticlockwise` est optionnel, -- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). +- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). ## Voir aussi -- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} +- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b0931493df..47e6e8bc3d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -51,8 +51,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:200px"> // First path @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index 6a49fdd769..389259f6a1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -93,7 +93,7 @@ Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCur #### JavaScript -La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). +La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). ```js const canvas = document.getElementById("canvas"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c537047361..e515d96d0e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/canvas --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. +La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. ## Syntaxe @@ -25,7 +25,7 @@ Soit cet élément {{HTMLElement("canvas")}}: <canvas id="canvas"></canvas> ``` -Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : ```js var canvas = document.getElementById("canvas"); @@ -37,7 +37,7 @@ ctx.canvas // HTMLCanvasElement | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 36000420e8..59aca48a7f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. +La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. ## Syntaxe @@ -14,23 +14,23 @@ La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas me ### Paramètres - `x` - - : La coordonnée sur l'axe des *x* du point de départ du rectangle. + - : La coordonnée sur l'axe des *x* du point de départ du rectangle. - `y` - - : La coordonnée sur l'axe des *y* du point de départ du rectangle. + - : La coordonnée sur l'axe des *y* du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Notes d'utilisation -Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. +Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. ## Exemples -### Utilisation de la méthode `clearRect` +### Utilisation de la méthode `clearRect` -Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. #### HTML @@ -57,7 +57,7 @@ ctx.clearRect(10, 10, 100, 100); // ctx.clearRect(0, 0, canvas.width, canvas.height); ``` -Modifiez le code suivant et voyez vos changements en direct dans le canevas : +Modifiez le code suivant et voyez vos changements en direct dans le canevas : #### Code jouable @@ -110,7 +110,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 174105faf5..b35d863b66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. +La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. ## Syntax @@ -44,8 +44,8 @@ Editez le code ci-dessous et observez les répercutions dans le canvas: ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); @@ -88,7 +88,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 6785b0f24e..4bfb807aba 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -11,7 +11,7 @@ La méthode **`CanvasRenderingContext2D.createLinearGradient()`** de l'API Canva Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". +NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". ## Syntaxe @@ -37,7 +37,7 @@ NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors ### Utilisation de la méthode `createLinearGradient` -Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. +Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. #### HTML @@ -58,15 +58,15 @@ ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -108,7 +108,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs @@ -116,9 +116,9 @@ window.addEventListener("load", drawCanvas); ## Notes spécifiques à Gecko -- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. +- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index 2ec6290329..af4afb71ae 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} -La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. +La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. ## Syntaxe @@ -20,7 +20,7 @@ Valeurs possibles : - rtl - : La direction du texte est de droite à gauche. - inherit - - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. + - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. La valeur par défaut est `inherit`. @@ -28,7 +28,7 @@ La valeur par défaut est `inherit`. ### Utilisation de la propriété `direction` -Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. #### HTML @@ -54,8 +54,8 @@ Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -95,7 +95,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index a24333d9f9..e2a1aff462 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. +La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. ## Syntaxe @@ -18,28 +18,28 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ### Paramètres - `image` - - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. + - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. - `dx` - - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dy` - - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dLargeur` - - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. + - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. - dHauteur - - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. + - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. - `sx` - - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sy` - - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sLargeur` - - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. + - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. - `sHauteur` - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`. ### Exceptions - `INDEX_SIZE_ERR` - - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. + - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. - `INVALID_STATE_ERR` - : L'image reçue n'en est pas une. - `TYPE_MISMATCH_ERR` @@ -47,9 +47,9 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ## Exemples -### Utiliser la méthode `drawImage` +### Utiliser la méthode `drawImage` -Ceci est un extrait de code utilisant la méthode `drawImage` : +Ceci est un extrait de code utilisant la méthode `drawImage` : #### HTML @@ -79,8 +79,8 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <img id="source" src="rhino.jpg" width="300" height="227"> </div> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> @@ -119,7 +119,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -127,16 +127,16 @@ window.addEventListener("load", drawCanvas); ## Notes concernant la compatibilité -- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. -- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. -- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. +- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. +- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. +- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. - Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas. -- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). -- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). ## Notes -- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) +- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index c95beacdff..568197aa19 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} -La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). +La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). ## Syntaxe @@ -14,27 +14,27 @@ La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajout ### Paramètres - `x` - - : La coordonnée sur l'axe des x du centre de l'ellipse. + - : La coordonnée sur l'axe des x du centre de l'ellipse. - `y` - - : La coordonnée sur l'axe des y du centre de l'ellipse. + - : La coordonnée sur l'axe des y du centre de l'ellipse. - `rayon`X - : Le rayon du grand axe de l'ellipse. - `rayon`Y - - : Le rayon du petit axe de l'ellipse. + - : Le rayon du petit axe de l'ellipse. - `rotation` - - : La rotation pour cette ellipse, exprimée en radians. + - : La rotation pour cette ellipse, exprimée en radians. - `angleDébut` - - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. + - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. - `angleFin` - - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. -- `antihoraire` {{optional_inline}} - - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. + - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. +- `antihoraire` {{optional_inline}} + - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. ## Exemples ### Utilisation de la méthode `ellipse` -Ceci est seulement un fragment de code simple dessinant une ellipse. +Ceci est seulement un fragment de code simple dessinant une ellipse. #### HTML @@ -53,15 +53,15 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -101,7 +101,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -109,4 +109,4 @@ window.addEventListener("load", drawCanvas); ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index 6d79084923..fb140f74ea 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -53,8 +53,8 @@ ctx.fill(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -125,8 +125,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -176,7 +176,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index 734483f27d..f8d39d617b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. +La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas d ### Paramètres - `x` - - : L'ordonnée *x* des coordonnées du point de départ du rectangle. + - : L'ordonnée *x* des coordonnées du point de départ du rectangle. - `y` - - : L'abscisse *y* des coordonnées du point de départ du rectangle. + - : L'abscisse *y* des coordonnées du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `fillRect` +### Utilisation de la méthode `fillRect` -Ceci est juste un extrait de code qui utilise la méthode `fillRect`. +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. #### HTML @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = "green"; @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index a55ea78000..e81260b93d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; @@ -116,7 +116,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 182d5aa7fe..318b310357 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -21,10 +21,10 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour <!----> - `x` - - : La valeur de la coordonnée sur l'axe des x du point de début du texte. + - : La valeur de la coordonnée sur l'axe des x du point de début du texte. - `y` - - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. -- `largeurMax` {{optional_inline}} + - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. +- `largeurMax` {{optional_inline}} - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police. ## Exemples @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 872b25996a..161f3e3ec2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -38,15 +38,15 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -97,7 +97,7 @@ f.load().then(function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index fc1acc270a..b85a69358f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. +La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées. @@ -27,28 +27,28 @@ Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs ### Paramètres - `sx` - - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. + - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. - `sy` - - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. + - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. - `sw` - - : La largeur du rectangle à partir duquel *ImageData* sera extrait. + - : La largeur du rectangle à partir duquel *ImageData* sera extrait. - `sh` - - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. + - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. ### Valeur retournée -Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. ### Erreurs renvoyées - `IndexSizeError` - - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. ## Exemples -### Utilisation de la méthode `getImageData` +### Utilisation de la méthode `getImageData` -Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. +Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. #### HTML diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index cedbd7eaa0..d7c32d2d8a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,9 +18,9 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canv ## Exemples -### Utilisation de la propriété `globalAlpha` +### Utilisation de la propriété `globalAlpha` -Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. #### HTML @@ -50,8 +50,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacement" type="button" value="Effacement" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> </div> <textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; @@ -91,9 +91,9 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 380) }} -### Un exemple de `globalAlpha` +### Un exemple de `globalAlpha` -Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. +Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -130,7 +130,7 @@ for (i = 0; i < 7; i++){ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -138,7 +138,7 @@ for (i = 0; i < 7; i++){ ## Notes spécifiques à Gecko -- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. +- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. ## Notes spécifiques à WebKit/Blink diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 4383ac79e0..8165774d92 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -5,21 +5,21 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. +La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). ## Syntaxe ctx.globalCompositeOperation = type; -`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. ## Exemples ### Changer l'opération de composition -Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. #### HTML @@ -59,12 +59,12 @@ ctx.fillRect(50, 50, 100, 100); ### Remarques concernant WebKit/Blink -- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. -- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. +- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. +- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. ### Remarques concernant Gecko -- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. +- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 3ab0e43267..b71d53bfab 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} -La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. +La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. -Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. +Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. ## Syntaxe @@ -16,7 +16,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise ### Options - `valeur` - - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. ## Exemples @@ -66,7 +66,7 @@ img.onload = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -74,5 +74,5 @@ img.onload = function() { ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{cssxref("image-rendering")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md index f6ab561009..5351d735c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -10,37 +10,37 @@ translation_of: Web/API/CanvasRenderingContext2D --- {{APIRef}} -L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. +L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. -Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : +Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> var ctx = canevas.getContext('2d'); -Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : +Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 -Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. +Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. -## Dessin de rectangles +## Dessin de rectangles -Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. +Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. - {{domxref("CanvasRenderingContext2D.clearRect()")}} - - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. + - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. - {{domxref("CanvasRenderingContext2D.fillRect()")}} - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_. - {{domxref("CanvasRenderingContext2D.strokeRect()")}} - - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. + - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. ## Dessiner du texte Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte. - {{domxref("CanvasRenderingContext2D.fillText()")}} - - : Dessine (rempli) un texte donné à la position (x,y) donnée. + - : Dessine (rempli) un texte donné à la position (x,y) donnée. - {{domxref("CanvasRenderingContext2D.strokeText()")}} - : Dessine (contour) un texte donné à la position (x, y) donnée. - {{domxref("CanvasRenderingContext2D.measureText()")}} @@ -53,9 +53,9 @@ Les méthodes et propriétés suivantes controllent comment les lignes sont dess - {{domxref("CanvasRenderingContext2D.lineWidth")}} - : Largeur des lignes. Défaut `1.0` - {{domxref("CanvasRenderingContext2D.lineCap")}} - - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. + - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. - {{domxref("CanvasRenderingContext2D.lineJoin")}} - - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). + - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). - {{domxref("CanvasRenderingContext2D.miterLimit")}} - : Le taux limite du miter. Sa valeur par défaut est `10`. - {{domxref("CanvasRenderingContext2D.getLineDash()")}} @@ -72,20 +72,20 @@ Les propriétés suivantes contrôlent la manière dont le texte est rendu à l - {{domxref("CanvasRenderingContext2D.font")}} - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`. - {{domxref("CanvasRenderingContext2D.textAlign")}} - - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. + - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. - {{domxref("CanvasRenderingContext2D.textBaseline")}} - - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. + - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. - {{domxref("CanvasRenderingContext2D.direction")}} - - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). + - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). ## Fill and stroke styles Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. - {{domxref("CanvasRenderingContext2D.fillStyle")}} - - : Color or style to use inside shapes. Default `#000` (black). + - : Color or style to use inside shapes. Default `#000` (black). - {{domxref("CanvasRenderingContext2D.strokeStyle")}} - - : Color or style to use for the lines around shapes. Default `#000` (black). + - : Color or style to use for the lines around shapes. Default `#000` (black). ## Gradients and patterns @@ -99,7 +99,7 @@ Fill styling is used for colors and styles inside shapes and stroke styling is u ## Shadows - {{domxref("CanvasRenderingContext2D.shadowBlur")}} - - : Specifies the blurring effect. Default `0` + - : Specifies the blurring effect. Default `0` - {{domxref("CanvasRenderingContext2D.shadowColor")}} - : Color of the shadow. Default fully-transparent black. - {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} @@ -116,19 +116,19 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.closePath()")}} - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. - {{domxref("CanvasRenderingContext2D.moveTo()")}} - - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. - {{domxref("CanvasRenderingContext2D.lineTo()")}} - - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. - {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}} - - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}} - : Adds a quadratic Bézier curve to the current path. - {{domxref("CanvasRenderingContext2D.arc()")}} - - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.arcTo()")}} - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. - {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}} - - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.rect()")}} - : Creates a path for a rectangle at position *(x, y)* with a size that is determined by *width* and *height*. @@ -143,7 +143,7 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} - : Scrolls the current path or a given path into the view. - {{domxref("CanvasRenderingContext2D.clip()")}} - - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. + - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. - {{domxref("CanvasRenderingContext2D.isPointInPath()")}} - : Reports whether or not the specified point is contained in the current path. - {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} @@ -151,7 +151,7 @@ The following methods can be used to manipulate paths of objects. ## Transformations -Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. +Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. - {{domxref("CanvasRenderingContext2D.currentTransform")}} - : Current transformation matrix ({{domxref("SVGMatrix")}} object). @@ -164,16 +164,16 @@ Objects in the `CanvasRenderingContext2D` rendering context have a current tra - {{domxref("CanvasRenderingContext2D.transform()")}} - : Multiplies the current transformation matrix with the matrix described by its arguments. - {{domxref("CanvasRenderingContext2D.setTransform()")}} - - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. + - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. - {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}} - : Resets the current transform by the identity matrix. ## Compositing - {{domxref("CanvasRenderingContext2D.globalAlpha")}} - - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). + - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). - {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} - - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. ## Drawing images @@ -187,7 +187,7 @@ See also the {{domxref("ImageData")}} object. - {{domxref("CanvasRenderingContext2D.createImageData()")}} - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black. - {{domxref("CanvasRenderingContext2D.getImageData()")}} - - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. + - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. - {{domxref("CanvasRenderingContext2D.putImageData()")}} - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. @@ -198,12 +198,12 @@ See also the {{domxref("ImageData")}} object. ## The canvas state -The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: +The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: - {{domxref("CanvasRenderingContext2D.save()")}} - - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. + - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. - {{domxref("CanvasRenderingContext2D.restore()")}} - - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. + - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. - {{domxref("CanvasRenderingContext2D.canvas")}} - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. @@ -212,7 +212,7 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Adds a hit region to the canvas. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Removes the hit region with the specified `id` from the canvas. + - : Removes the hit region with the specified `id` from the canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Removes all hit regions from the canvas. @@ -220,49 +220,49 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing ### Blink and WebKit -Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). +Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). -- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}. -- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` - - : This is redundant with an equivalent overload of `drawImage`. -- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` +- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` + - : This is redundant with an equivalent overload of `drawImage`. +- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead. ### Blink only -- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` - - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. +- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` + - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. ### WebKit only -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` - - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` + - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. <!----> @@ -274,40 +274,40 @@ Most of these APIs are [deprecated and will be removed in the future](https://c #### Prefixed APIs -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` - - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` - - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` + - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` + - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. -- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` +- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. #### Internal APIs (chrome-context only) - {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}} - - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. -- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` + - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. +- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. ### Internet Explorer -- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` - - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). +- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` + - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). ## Specifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index e3666e004c..c9a7280458 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} -La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. +La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,17 +18,17 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Can ### Options - `butt` - - : Les extrémités de ligne sont coupées à angle droit. + - : Les extrémités de ligne sont coupées à angle droit. - `round` - - : Les extrémités de ligne sont arrondies. + - : Les extrémités de ligne sont arrondies. - `square` - - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. + - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. ## Exemples ### Utilisation de la propriété `lineCap` -Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. +Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. #### HTML @@ -57,8 +57,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -97,11 +97,11 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Un exemple de `lineCap` +### Un exemple de `lineCap` Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides. -La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. +La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -138,7 +138,7 @@ for (var i = 0; i < lineCap.length; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -146,7 +146,7 @@ for (var i = 0; i < lineCap.length; i++) { ## Notes spécifiques à WebKit/Blink -- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. +- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index e4fd4f8c90..bdf847455b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -9,7 +9,7 @@ La propriété **`CanvasRenderingContext2D.lineJoin`** de l'API Canvas 2D déter Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés. -> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. ## Syntaxe @@ -26,7 +26,7 @@ Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et ` - `"bevel"` (biseau) - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés. - `"miter"` (onglet) - - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. + - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. ## Exemples diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 8b1b3dbffa..83bca52b28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). +La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte ## Exemples -### Utilisation de la méthode `lineTo` +### Utilisation de la méthode `lineTo` -Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. +Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. #### HTML @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index 94926366d7..04ccaf4bde 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). +La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). ## Syntaxe @@ -20,21 +20,21 @@ La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domx ### Paramètres - texte - - : Le texte à mesurer. + - : Le texte à mesurer. ### Valeur retournée -Un objet {{domxref("TextMetrics")}}. +Un objet {{domxref("TextMetrics")}}. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canevas = document.getElementById('canevas'); @@ -48,7 +48,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index ca5dd0ebcf..09f3ff11e7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index cf51e85850..a2e331d491 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -98,7 +98,7 @@ contexte2D.stroke(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 91d1080833..fbaf106ba3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -50,8 +50,8 @@ ctx.fill(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index dd43fde3e5..6269d2e8da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -16,15 +16,15 @@ La méthode **`CanvasRenderingContext2D.rotate()`** de l'API Canvas 2D ajoute un ### Paramètres - `angle` - - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. + - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. -Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. +Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. ## Exemples ### Utilisation de la méthode `rotate` -Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(70, 0, 100, 30); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index 69be186f58..6b577b126f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} -La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. +La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. -Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. +Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. ## Syntaxe @@ -16,15 +16,15 @@ Par défaut, une unité sur le canevas est exactement un pixel. Si on appliqu ### Paramètres - `x` - - : Facteur d'échelle dans la direction horizontale. + - : Facteur d'échelle dans la direction horizontale. - y - - : Facteur d'échelle dans la direction verticale. + - : Facteur d'échelle dans la direction verticale. ## Exemples ### Utilisation de la méthode `scale` -Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(10, 10, 10, 10); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(10, 3); @@ -89,7 +89,7 @@ window.addEventListener("load", drawCanvas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Utilisation de `scale` pour un retournement horizontal ou vertical +### Utilisation de `scale` pour un retournement horizontal ou vertical Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1)` pour le retourner verticalement. @@ -98,8 +98,8 @@ Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontaleme ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(-1, 1); @@ -140,7 +140,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 85d5078d2c..436f19da6b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} -La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. +La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. -> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. ## Syntaxe @@ -16,7 +16,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ### Paramètres - `segments` - - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. + - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. ### Valeur de retour @@ -24,7 +24,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ## Exemples -C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. +C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. ### HTML @@ -53,15 +53,15 @@ ctx.stroke(); ### Essayez le -Editez le code ci-dessous et observez les changements se produire dans le canvas: +Editez le code ci-dessous et observez les changements se produire dans le canvas: #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); @@ -109,19 +109,19 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navivgateurs {{Compat("api.CanvasRenderingContext2D.setLineDash")}} -## Notes spécifiques pour Gecko +## Notes spécifiques pour Gecko -- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. +- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. -## Notes spécifiques pour WebKit +## Notes spécifiques pour WebKit -- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. +- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index cc123acdaa..50ff4a46b8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. +La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. ## Syntaxe void ctx.setTransform(a, b, c, d, e, f); -La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> +La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> ### Paramètres @@ -32,9 +32,9 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</ ## Exemples -### Utilisation de la méthode `setTransform` +### Utilisation de la méthode `setTransform` -Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. #### HTML @@ -52,15 +52,15 @@ ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 24925f1d01..6e92744b06 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -45,8 +45,8 @@ Editer le code en dessous et voir vos modifications mises à jour en direct dans ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -85,7 +85,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index e5cc41b3c5..1dadb9ebb1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. +La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas ### Paramètres - `x` - - : L'abcisse *x* des coordonnées du point de départ du rectangle. + - : L'abcisse *x* des coordonnées du point de départ du rectangle. - `y` - : L'ordonnée _y_ des coordonnées du point de départ du rectangle. - largeur - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `strokeRect` +### Utilisation de la méthode `strokeRect` -Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. #### HTML @@ -51,8 +51,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index aab6253a44..8bf5d7ea28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -53,8 +53,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; @@ -119,7 +119,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 2f7db41cd4..f687b2b396 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. +La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. ## Syntaxe @@ -16,22 +16,22 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour ### Paramètres - `texte` - - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. + - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. <!----> - `x` - - : La coordonnée sur l'axe des x du point de départ du texte. + - : La coordonnée sur l'axe des x du point de départ du texte. - `y` - - : La coordonnée sur l'axe des y du point de départ du texte. -- `largeurMax` {{optional_inline}} - - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. + - : La coordonnée sur l'axe des y du point de départ du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. ## Exemples -### Utilisation de la méthode `strokeText` +### Utilisation de la méthode `strokeText` -Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index 4e15fd41b9..45f2a8b340 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. +La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. ## Syntaxe @@ -22,17 +22,17 @@ Valeurs possibles : - center - : Le texte est centré. - start - - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). - end - - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). -La valeur pa défaut est `start`. +La valeur pa défaut est `start`. ## Exemples ### Utilisation de la propriété `textAlign` -Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. #### HTML @@ -58,8 +58,8 @@ Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -99,7 +99,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index d43cb1f77a..b543074551 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. +La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. ## Syntaxe @@ -20,21 +20,21 @@ Valeurs possibles : - hanging - : La ligne de base du texte est la ligne de base supérieure. - middle - - : La ligne de base du texte est le milieu du cadratin. + - : La ligne de base du texte est le milieu du cadratin. - alphabetic - - : La ligne de base du texte est la ligne de base normale alphabétique. + - : La ligne de base du texte est la ligne de base normale alphabétique. - ideographic - - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. + - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. - bottom - - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. + - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. -La valeur par défaut est `alphabetic`. +La valeur par défaut est `alphabetic`. ## Exemples ### Utilisation de la propritété `textBaseline` -Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. +Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. #### HTML @@ -53,15 +53,15 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -101,7 +101,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index e3ac8f2edd..d3be535ddd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} -La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. +La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. -Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. ## Syntaxe @@ -34,7 +34,7 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo ### Utilisation de la méthode `transform` -Ceci est seulement un fragment de code simple utilisant la méthode `transform`. +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. #### HTML @@ -59,8 +59,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 2c38c52591..cdbe0ad12b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} -La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. +La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. ## Syntaxe @@ -16,15 +16,15 @@ La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute u ### Paramètres - `x` - - : Distance de déplacement dans le sens horizontal. + - : Distance de déplacement dans le sens horizontal. - y - - : Distance de déplacement dans le sens vertical. + - : Distance de déplacement dans le sens vertical. ## Exemples ### Utilisation de la méthode `translate` -Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(0, 0, 100, 100); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.translate(50, 50); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md index 08aeb26bbd..36c2c355e8 100644 --- a/files/fr/web/api/clearinterval/index.md +++ b/files/fr/web/api/clearinterval/index.md @@ -38,7 +38,7 @@ Voir [l'exemple `setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval#Exemp | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ | | {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}} | {{Spec2("HTML WHATWG")}} | Cette méthode a été déplacée sur le _mixin_ `WindowOrWorkerGlobalScope`. | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md index acba1e7eac..f94cc4b75e 100644 --- a/files/fr/web/api/client/frametype/index.md +++ b/files/fr/web/api/client/frametype/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Client/frameType --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. +La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. ## Syntaxe diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md index e38a2fb262..26e53d0cc2 100644 --- a/files/fr/web/api/client/id/index.md +++ b/files/fr/web/api/client/id/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Client/id --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. +La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. ## Syntaxe diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md index 1727a3bf41..60c965036e 100644 --- a/files/fr/web/api/client/index.md +++ b/files/fr/web/api/client/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Client --- {{APIRef("Service Workers API")}} -L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. +L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. ## Méthodes @@ -27,15 +27,15 @@ L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorke - {{domxref("Client.id")}} {{readonlyInline}} - : Retourne l'identifiant universellement unique de l'objet `Client`. - {{domxref("Client.type")}} {{readonlyInline}} - - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. + - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. - {{domxref("Client.url")}} {{readonlyInline}} - : Retourne l'URL du client service worker courant. ## Exemples -Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. +Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. -Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur. +Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur. ```js // client service worker (par exemple un document) @@ -70,7 +70,7 @@ self.addEventListener("message", function(e) { - [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - [Promesses](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) -- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md index 12d36698bc..a2c108cd16 100644 --- a/files/fr/web/api/client/postmessage/index.md +++ b/files/fr/web/api/client/postmessage/index.md @@ -34,7 +34,7 @@ Void. ## Exemples -Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. +Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur. diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md index 7b40c93b14..c9369370e2 100644 --- a/files/fr/web/api/client/url/index.md +++ b/files/fr/web/api/client/url/index.md @@ -11,7 +11,7 @@ tags: - URL translation_of: Web/API/Client/url --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. ## Syntaxe @@ -30,8 +30,8 @@ self.addEventListener('notificationclick', function(event) { console.log('Au click de notification : ', event.notification.tag); event.notification.close(); - // Vérification pour savoir si l'évenement est ouvert et - // se focalise dessus si c'est le cas + // Vérification pour savoir si l'évenement est ouvert et + // se focalise dessus si c'est le cas event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) { diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md index e392a459aa..66c66036ad 100644 --- a/files/fr/web/api/clients/claim/index.md +++ b/files/fr/web/api/clients/claim/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Clients/claim --- {{SeeCompatTable}}{{APIRef("Service Worker Clients")}} -La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. +La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. -Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. +Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. ## Syntaxe @@ -30,18 +30,18 @@ None. ### Valeur de retour -Une `Promise.` +Une `Promise.` ## Exemple -L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. +L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. ```js self.addEventListener('install', function(event) { - event.waitUntil(self.skipWaiting()); + event.waitUntil(self.skipWaiting()); }); self.addEventListener('activate', function(event) { - event.waitUntil(self.clients.claim()); + event.waitUntil(self.clients.claim()); }); ``` @@ -49,7 +49,7 @@ self.addEventListener('activate', function(event) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | ## Compatibilité de navigateurs @@ -57,9 +57,9 @@ self.addEventListener('activate', function(event) { ## À voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Example simple de service workers](https://github.com/mdn/sw-test) -- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md index 24de95f0eb..29bcc963fb 100644 --- a/files/fr/web/api/clients/get/index.md +++ b/files/fr/web/api/clients/get/index.md @@ -10,7 +10,7 @@ tags: - get translation_of: Web/API/Clients/get --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. ## Syntaxe @@ -27,7 +27,7 @@ self.clients.get(id).then(function(client) { ### Valeur de retour -Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. +Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md index 992754486c..8ff6d7c4b2 100644 --- a/files/fr/web/api/clients/matchall/index.md +++ b/files/fr/web/api/clients/matchall/index.md @@ -10,7 +10,7 @@ tags: - Service Workers translation_of: Web/API/Clients/matchAll --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. ## Syntaxe @@ -24,14 +24,14 @@ ServiceWorkerClients.matchAll(options).then(function(clients) { - `options` - - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : + - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : - `includeUncontrolled`: Un {{domxref("Boolean")}} — défini à `true`, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est `false`. - - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. + - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. ### Valeur de retour -Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. +Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md index c991c6653c..1d678620b0 100644 --- a/files/fr/web/api/clients/openwindow/index.md +++ b/files/fr/web/api/clients/openwindow/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clients/openWindow --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. +La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification. @@ -20,11 +20,11 @@ ServiceWorkerClients.openWindow(url).then(function(WindowClient) { ### Paramètres - `url` - - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. + - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. ### Valeur de retour -Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon. +Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon. ## Exemples @@ -36,7 +36,7 @@ onotificationclick = function(event) { clients.matchAll().then(function(clients) { for (i = 0; i < clients.length; i++) { if (clients[i].url === event.data.url) { - // La fenêtre existe, focus dessus. + // La fenêtre existe, focus dessus. found = true; clients[i].focus(); break; diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md index b9ca3fca06..4a898b989f 100644 --- a/files/fr/web/api/clipboard/index.md +++ b/files/fr/web/api/clipboard/index.md @@ -15,11 +15,11 @@ translation_of: Web/API/Clipboard --- {{APIRef("Clipboard API")}} -> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. +> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. > > Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces. -L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. +L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}. @@ -27,7 +27,7 @@ Les appels aux méthodes de l’objet `Clipboard` échoueront si l’utilisateur > **Note :** En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails. -Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé. +Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé. ## Méthodes @@ -36,7 +36,7 @@ _`Clipboard` est basé sur l’interface {{domxref("EventTarget")}}, et inclut l - {{domxref("Clipboard.read()","read()")}} - : Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données. - {{domxref("Clipboard.readText()","readText()")}} - - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. + - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. - {{domxref("Clipboard.write()","write()")}} - : Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la `Promise` renvoyée. - {{domxref("Clipboard.writeText()","writeText()")}} diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md index 955bf1f320..1989de8383 100644 --- a/files/fr/web/api/clipboard/write/index.md +++ b/files/fr/web/api/clipboard/write/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/Clipboard/write --- {{APIRef("Clipboard API")}} -La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. +La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. -Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. +Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. > **Note :** Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information. @@ -18,15 +18,15 @@ Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permission ### Paramètres - `dataTransfer` - - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. + - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. ### Return value -Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. +Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. ## Exemple -Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. +Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. ```js function setClipboard(text) { @@ -41,7 +41,7 @@ function setClipboard(text) { } ``` -Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. +Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. ## Specifications diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md index bdd7d9543c..ead902ec4f 100644 --- a/files/fr/web/api/clipboard_api/index.md +++ b/files/fr/web/api/clipboard_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clipboard_API --- {{DefaultAPISidebar("Clipboard API")}} -L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. +L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. > **Note :** Cette API _n'est pas disponible_ dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API) (elle n'est pas exposée via {{domxref("WorkerNavigator")}}). @@ -13,7 +13,7 @@ Cette API est conçue pour remplacer l'accès au presse-papiers précédemment p ## Accéder au presse-papier -Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : +Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : ```js navigator.clipboard.readText().then( diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md index a6d23bbdf6..e128b97ef5 100644 --- a/files/fr/web/api/closeevent/index.md +++ b/files/fr/web/api/closeevent/index.md @@ -16,15 +16,15 @@ Un évènement `CloseEvent` est envoyé au client utilisant une [WebSocket](/fr/ ## Constructeur - {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} - - : Construit un nouvel événement `CloseEvent`. + - : Construit un nouvel événement `CloseEvent`. ## Propriétés -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.code")}} {{readOnlyInline}} - - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. + - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. <table class="standard-table"> <tbody> @@ -35,7 +35,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>0</code>–<code>999</code></td> - <td> </td> + <td></td> <td><strong>Reservé et inutilisé.</strong></td> </tr> <tr> @@ -72,7 +72,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1004</code></td> - <td> </td> + <td></td> <td> <strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur. @@ -82,7 +82,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1005</code></td> <td><code>CLOSE_NO_STATUS</code></td> <td> - <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un + <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu. </td> </tr> @@ -90,13 +90,13 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1006</code></td> <td><code>CLOSE_ABNORMAL</code></td> <td> - <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été + <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture). </td> </tr> <tr> <td><code>1007</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format @@ -105,7 +105,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1008</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est @@ -123,7 +123,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1010</code></td> - <td> </td> + <td></td> <td> Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait. @@ -131,7 +131,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1011</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête. @@ -139,7 +139,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td>–<code>1014</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -149,16 +149,16 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1015</code></td> - <td> </td> + <td></td> <td> - <strong>Réservé.</strong> Indique que la connexion a été fermée à cause + <strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié). </td> </tr> <tr> <td><code>1016</code>–<code>1999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -168,7 +168,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>2000</code>–<code>2999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -178,32 +178,32 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>3000</code>–<code>3999</code></td> - <td> </td> + <td></td> <td> Disponible pour être utilisé par des bibliothèques ou des frameworks. - Ces codes <strong>ne doivent pas</strong> être utilisés par des + Ces codes <strong>ne doivent pas</strong> être utilisés par des applications. </td> </tr> <tr> <td><code>4000</code>–<code>4999</code></td> - <td> </td> + <td></td> <td>Disponible pour être utilisés par des applications.</td> </tr> </tbody> </table> - {{domxref("CloseEvent.reason")}} {{readOnlyInline}} - - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. + - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. - {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}} - : Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non. ## Méthodes -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}} - - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. + - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. ## Spécifications diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md index 40f4ebe0de..62e4ee454a 100644 --- a/files/fr/web/api/comment/index.md +++ b/files/fr/web/api/comment/index.md @@ -14,7 +14,7 @@ L'interface **`Comment`** représente des annotations textuelles au sein du bali ## Propriétés -_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ +_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ ## Constructeur @@ -23,7 +23,7 @@ _Cette interface ne possède pas de propriétés spécifiques, mais en hérite ## Méthodes -_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ +_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ ## Spécifications diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md index f91b5a3815..be658e0eb2 100644 --- a/files/fr/web/api/compositionevent/index.md +++ b/files/fr/web/api/compositionevent/index.md @@ -36,8 +36,8 @@ _Cette interface hérite également des méthodes de son parent, {{domxref("UIEv | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | -| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md index 0b3aaddfaf..ae7237316d 100644 --- a/files/fr/web/api/console/assert/index.md +++ b/files/fr/web/api/console/assert/index.md @@ -28,13 +28,13 @@ Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'asse - `assertion` - : N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console. - `obj1` ... `objN` - - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. + - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. - `msg` - - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. + - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. - `subst1` ... `substN` - - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. + - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. -Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md index e0914af264..963e34b654 100644 --- a/files/fr/web/api/console/clear/index.md +++ b/files/fr/web/api/console/clear/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/Console/clear --- {{APIRef("Console API")}} -Vide la console. +Vide la console. Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared"). -À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). +À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). ## Syntaxe diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md index 7cb5fa0d25..3585fcc54a 100644 --- a/files/fr/web/api/console/count/index.md +++ b/files/fr/web/api/console/count/index.md @@ -13,13 +13,13 @@ translation_of: Web/API/Console/count --- {{APIRef("Console API")}} -Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. +Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. {{AvailableInWorkers}} Si un `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée pour ce `label` spécifiquempent. -Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. +Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. Ci-dessous, un exemple d'utilisation : @@ -44,9 +44,9 @@ La console affichera les lignes suivantes : "<no label>: 3" "<no label>: 1" -A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. +A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. -Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : +Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : ```js function greet() { @@ -69,7 +69,7 @@ La console affichera les lignes suivantes : "alice: 2" "alice: 3" -Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. +Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. ## Syntaxe @@ -78,7 +78,7 @@ Nous obtenons maintenant deux compteurs distinct basés sur un libellé différe ## Paramètres - `label` - - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. + - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. ## Spécifications diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md index 3fb703d448..26da32c5f2 100644 --- a/files/fr/web/api/console/countreset/index.md +++ b/files/fr/web/api/console/countreset/index.md @@ -30,11 +30,11 @@ Si aucun label n'as été specifié ### Warnings -Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : +Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : Counter "counter-name" doesn’t exist. -Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : +Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : Counter "default" doesn’t exist. @@ -69,7 +69,7 @@ Le retour de la console ressemblera à ceci : Pour information l'appel à `console.counterReset()` remet à zero la valeur du compteur par défaut. -S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : +S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : ```js var user = ""; @@ -96,7 +96,7 @@ On obtiendra ce retour dans la console "bob: 0" "alice: 3" -Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. +Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. ## Specifications diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md index 58ccae6929..56f3d17e6a 100644 --- a/files/fr/web/api/console/error/index.md +++ b/files/fr/web/api/console/error/index.md @@ -35,7 +35,7 @@ Affiche un message d'erreur dans la console du navigateur. - `subst1` ... `substN` - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md index aa84ded541..07097f5ee3 100644 --- a/files/fr/web/api/console/groupcollapsed/index.md +++ b/files/fr/web/api/console/groupcollapsed/index.md @@ -18,7 +18,7 @@ Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxre Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent. -Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. +Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md index 8729a7f1cb..4beb3f1a20 100644 --- a/files/fr/web/api/console/groupend/index.md +++ b/files/fr/web/api/console/groupend/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Console/groupEnd --- {{APIRef("Console API")}} -Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. +Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md index 35cf36b6fa..cde6c8f71d 100644 --- a/files/fr/web/api/console/index.md +++ b/files/fr/web/api/console/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Console L'objet **`console`** donne accès à la console de débogage du navigateur (par exemple, la [Console Web](/fr/docs/Tools/Web_Console) dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base. -La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : +La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : ```js console.log("Failed to open the specified link") @@ -61,7 +61,7 @@ Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'obj - {{domxref("Console.table()")}} - : Affiche des données tabulaires comme un tableau. - {{domxref("Console.time()")}} - - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. + - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. - {{domxref("Console.timeEnd()")}} - : Arrête le [chronomètre](/fr/docs/Web/API/console#Timers) spécifié et affiche le temps écoulé en millisecondes depuis son démarrage. - {{domxref("Console.timeStamp()")}} {{Non-standard_inline}} @@ -104,7 +104,7 @@ console.info("My first car was a", car, ". The object is: ", someObject); L'affichage ressemblera à ceci : - [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) + [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) #### Utiliser les caractères de substitution @@ -149,7 +149,7 @@ Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substit Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple : for (var i=0; i<5; i++) { - console.log("Hello, %s. You've called me %d times.", "Bob", i+1); + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); } L'affichage ressemblera à ceci : @@ -199,7 +199,7 @@ L'affichage ressemblera à ceci : {{h3_gecko_minversion("Timers", "10.0")}} -Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. +Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. Par exemple, voici ce code : @@ -224,10 +224,10 @@ L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le foo(); function foo() { - function bar() { - console.trace(); - } - bar(); + function bar() { + console.trace(); + } + bar(); } L'affichage dans la console ressemblera à ceci : diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md index 03466b8172..50a4f87e40 100644 --- a/files/fr/web/api/console/profileend/index.md +++ b/files/fr/web/api/console/profileend/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Console/profileEnd --- {{APIRef("Console API")}}{{Non-standard_header}} -> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). +> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). -La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. +La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils. diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md index d10348512f..470915e720 100644 --- a/files/fr/web/api/console/table/index.md +++ b/files/fr/web/api/console/table/index.md @@ -18,7 +18,7 @@ Cette fonction prend un argument obligatoire `data`, qui doit être un tableau ( Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet) -La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) +La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) {{AvailableInWorkers}} @@ -38,8 +38,8 @@ console.table(["apples", "oranges", "bananas"]); // un objet dont les propriétés sont des chaînes de caractères function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; + this.firstName = firstName; + this.lastName = lastName; } var me = new Person("John", "Smith"); diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md index af170f9326..b5f513a857 100644 --- a/files/fr/web/api/console/time/index.md +++ b/files/fr/web/api/console/time/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/Console/time --- {{APIRef("Console API")}} -Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console. +Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console. -Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. +Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. ## Syntaxe @@ -32,7 +32,7 @@ Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domx | ------------------------------------------------------------------------ | -------------------------------- | ------------------- | | {{SpecName("Console API", "#time", "console.time()")}} | {{Spec2("Console API")}} | Définition initiale | -## Compatibilité des navigateurs +## Compatibilité des navigateurs {{Compat("api.Console.time")}} diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md index b8fb84bc0c..efd290013a 100644 --- a/files/fr/web/api/console/timelog/index.md +++ b/files/fr/web/api/console/timelog/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Console/timeLog Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}} -Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails +Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails {{AvailableInWorkers}} @@ -34,7 +34,7 @@ Si aucun label n'est inclus default: 1042ms -Si un `label` est inclus: +Si un `label` est inclus: timer name: 1242ms @@ -60,7 +60,7 @@ Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fe  -Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté +Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté ## Spécifications diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md index 26433b17b0..6fad1f1130 100644 --- a/files/fr/web/api/credential/index.md +++ b/files/fr/web/api/credential/index.md @@ -15,9 +15,9 @@ L'interface **`Credential`**, rattachée à l'[API Credential Management](/fr/do ## Propriétés -- {{domxref("Credential.id")}} {{readonlyInline}} +- {{domxref("Credential.id")}} {{readonlyInline}} - : Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique. -- {{domxref("Credential.type")}} {{readonlyInline}} +- {{domxref("Credential.type")}} {{readonlyInline}} - : Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md index a322b56e71..009e899da4 100644 --- a/files/fr/web/api/credentialscontainer/create/index.md +++ b/files/fr/web/api/credentialscontainer/create/index.md @@ -33,14 +33,14 @@ La méthode **`create()`**, rattachée à l'interface {{domxref("CredentialsCont - `id`: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `password`: (required) {{domxref("USVString")}} - federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : - `id`: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `provider`: (required) {{domxref("USVString")}} - `protocol`: {{optional_inline}} {{domxref("USVString")}} diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md index cee2fcb61c..9dd9a64eae 100644 --- a/files/fr/web/api/credentialscontainer/get/index.md +++ b/files/fr/web/api/credentialscontainer/get/index.md @@ -17,7 +17,7 @@ La méthode **`get()`**, rattachée à l'interface {{domxref("CredentialsContain Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument **`options`**). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information. -Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. +Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. > **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md index 6ca704fc70..03b53401d9 100644 --- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md +++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CredentialsContainer/preventSilentAccess --- {{APIRef("")}}{{SeeCompatTable}} -La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. +La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine. diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md index 073f4faa25..127a5affc1 100644 --- a/files/fr/web/api/crossoriginisolated/index.md +++ b/files/fr/web/api/crossoriginisolated/index.md @@ -6,9 +6,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated --- {{APIRef()}}{{SeeCompatTable}} -La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. +La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. -Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. +Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. ## Syntaxe diff --git a/files/fr/web/api/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md index 57e9c02508..220ae419fc 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.md +++ b/files/fr/web/api/crypto/getrandomvalues/index.md @@ -24,11 +24,11 @@ Pour garantir une performance suffisante, les implémentations n’utilisent pas ### Paramètres - _typedArray_ - - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. + - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. ### Exceptions -- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. +- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. ## Exemple @@ -40,7 +40,7 @@ window.crypto.getRandomValues(array); console.log("Your lucky numbers:"); for (var i = 0; i < array.length; i++) { - console.log(array[i]); + console.log(array[i]); } ``` @@ -56,5 +56,5 @@ for (var i = 0; i < array.length; i++) { ## Voir aussi -- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. +- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. - {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires. diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md index 2f968ce1ff..359d529773 100644 --- a/files/fr/web/api/crypto_property/index.md +++ b/files/fr/web/api/crypto_property/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Window/crypto --- {{APIRef}} -La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. +La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. ## Syntaxe diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md index fa771b7c25..c56d64655c 100644 --- a/files/fr/web/api/cryptokey/index.md +++ b/files/fr/web/api/cryptokey/index.md @@ -19,11 +19,11 @@ Un objet `CryptoKey` peut être obtenu en utilisant : {{domxref("SubtleCrypto.ge _Cette interface n'hérite d'aucune propriété._ - {{domxref("CryptoKey.type")}} - - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) + - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) - {{domxref("CryptoKey.extractable")}} - : Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non. - {{domxref("CryptoKey.algorithm")}} - - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. + - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. - {{domxref("CryptoKey.usages")}} - : Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée. diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md index 017510ce92..b4aba0224b 100644 --- a/files/fr/web/api/css_font_loading_api/index.md +++ b/files/fr/web/api/css_font_loading_api/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/CSS_Font_Loading_API L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices. -> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). +> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). ## Interfaces diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md index a462fb28d2..7f2131520b 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -23,7 +23,7 @@ A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` ## Quelle est la taille du contenu affiché ? -Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) : +Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) :  diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md index e4d30ca91e..abbb92efb9 100644 --- a/files/fr/web/api/css_object_model/index.md +++ b/files/fr/web/api/css_object_model/index.md @@ -49,7 +49,7 @@ Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS d - {{domxref("StylesheetList")}} - {{domxref("TransitionEvent")}} -Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}. +Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}. ## Tutoriels @@ -60,17 +60,17 @@ Quelques autres interfaces sont également étentues par les spécifications rel | Spécification | Statut | Commentaire | | ------------------------------------------------ | -------------------------------------------- | ----------- | -| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | -| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | -| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | -| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | -| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | -| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | -| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | -| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | -| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | -| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | +| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | +| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | +| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | +| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | +| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | +| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | +| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | +| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | +| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | +| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | ## Notes sur la compatibilité des navigateurs -Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. +Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md index 3af0577eb9..d9e1f30897 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md @@ -139,7 +139,7 @@ screen.addEventListener("orientationchange", function () { Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}. -{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). +{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). ```js screen.lockOrientation('landscape'); diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md index eab131b831..da0e43683f 100644 --- a/files/fr/web/api/css_properties_and_values_api/index.md +++ b/files/fr/web/api/css_properties_and_values_api/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CSS_Properties_and_Values_API ## Exemples -L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : ```js window.CSS.registerProperty({ @@ -25,7 +25,7 @@ window.CSS.registerProperty({ }); ``` -Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --ma-couleur { diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md index b16fdeb972..e3bf59727a 100644 --- a/files/fr/web/api/cssmediarule/index.md +++ b/files/fr/web/api/cssmediarule/index.md @@ -35,7 +35,7 @@ En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSG | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------- | -| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | +| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | | {{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSSOM') }} | Aucun changement par rapport à {{SpecName('DOM2 Style')}} | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }} | {{ Spec2('DOM2 Style') }} | | diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md index bf637d5319..379fbb1ddd 100644 --- a/files/fr/web/api/cssrulelist/index.md +++ b/files/fr/web/api/cssrulelist/index.md @@ -10,7 +10,7 @@ A `CSSRuleList` est un objet de type tableau contenant une collection ordonnée ## Description -Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. +Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. ## Exemple diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md index da6bbcc30d..c58e945a28 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.md +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md @@ -7,7 +7,7 @@ A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRul {{APIRef("CSSOM") }} -**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) +**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) ## Syntaxe diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md index 56ddcfcab1..d071804a69 100644 --- a/files/fr/web/api/cssstyledeclaration/index.md +++ b/files/fr/web/api/cssstyledeclaration/index.md @@ -12,10 +12,10 @@ translation_of: Web/API/CSSStyleDeclaration --- {{ APIRef("CSSOM") }} -`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : +`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : -- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; -- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; +- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; +- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; - `CSSStyleDeclaration` est également une interface en **lecture seule** pour le résultat de [window.getComputedStyle()](/fr/docs/Web/API/Window/getComputedStyle). ## Attributs @@ -68,5 +68,5 @@ Le bloc de déclaration est la partie de la règle de mise en forme qui apparaî | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale. | diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md index 4e7b4c9cd0..e22916eec4 100644 --- a/files/fr/web/api/cssstylerule/index.md +++ b/files/fr/web/api/cssstylerule/index.md @@ -12,8 +12,8 @@ CSSStyleRule représente une règle de style CSS unique. Il implémente l'interf La syntaxe est décrite à l'aide du format WebIDL. interface CSSStyleRule : CSSRule { - attribute DOMString selectorText; - readonly attribute CSSStyleDeclaration style; + attribute DOMString selectorText; + readonly attribute CSSStyleDeclaration style; }; ## Properties @@ -28,7 +28,7 @@ La syntaxe est décrite à l'aide du format WebIDL. | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | | {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }} | pas de changement | -| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | +| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md index 678068ac0d..2d8390a365 100644 --- a/files/fr/web/api/cssvaluelist/index.md +++ b/files/fr/web/api/cssvaluelist/index.md @@ -23,13 +23,13 @@ Les éléments dans `CSSValueList` sont accessibles par un index integral commen _Hérite des propriétés de son parent {{domxref("CSSValue")}}_. -- {{domxref("CSSValueList.length")}} {{readonlyInline}} +- {{domxref("CSSValueList.length")}} {{readonlyInline}} - : Un `unsigned long` représentant le nombre de `CSSValues` (_valeurs CSS_) dans la liste. ## Méthodes - {{domxref("CSSValueList.item()")}} - - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. + - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. ## Spécifications diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md index 4c2246a9f8..020ef1466b 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.md +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DataTransfer/clearData La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet. -> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées. +> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées. ## Syntaxe @@ -154,7 +154,7 @@ window.addEventListener('DOMContentLoaded', function () { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML5.1')}} | Définition initiale | ## Compatibilité diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md index 3be3abd508..e4db594b1c 100644 --- a/files/fr/web/api/datatransfer/files/index.md +++ b/files/fr/web/api/datatransfer/files/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DataTransfer/files --- {{APIRef("HTML Drag and Drop API")}} -La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. +La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur. @@ -34,7 +34,7 @@ Voici deux exemples : | Specification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md index 817fe3ae82..e210b7691c 100644 --- a/files/fr/web/api/datatransfer/index.md +++ b/files/fr/web/api/datatransfer/index.md @@ -6,9 +6,9 @@ tags: - Glisser-deposer translation_of: Web/API/DataTransfer --- -L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). +L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). -Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. +Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. ## Aperçu des proprietés @@ -191,52 +191,52 @@ Cet objet est disponible depuis la propriété `dataTransfer` de tous les év ### dropEffect -L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. +L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. -Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. +Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. -Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. +Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. -Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. +Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. Valeurs possibles: - **copy**: Une copie de l'élément source est faite au nouvel emplacement. - **move**: Un élément est déplacé vers un nouvel emplacement. -- **link**: Un lien est établi depuis la source vers le nouvel emplacement. +- **link**: Un lien est établi depuis la source vers le nouvel emplacement. - **none**: L'élément ne peut pas être déposé. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### effectAllowed -Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. +Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. Valeurs possibles: - **copy**: Une copie de l'élément source peut être faite à son nouvel emplacement. - **move**: Un élément peut être déplacé vers un nouvel emplacement. -- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. -- **copyLink**: Une opération copy ou link est autorisée. +- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. +- **copyLink**: Une opération copy ou link est autorisée. - **copyMove**: Une opération copy ou move est autorisée. -- **linkMove**: Une opération link ou move est autorisée. -- **all**: Toutes les opérations sont autorisées. +- **linkMove**: Une opération link ou move est autorisée. +- **all**: Toutes les opérations sont autorisées. - **none**: l'élément ne peut être déposé. -- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. +- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### files -Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. +Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. #### Exemple -Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> +Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> ### types -Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée. +Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée. L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet. @@ -253,27 +253,27 @@ L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisé ### mozItemCount -Le nombre d'éléments glissés. +Le nombre d'éléments glissés. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozSourceNode -le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud. +le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozUserCancelled -Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. +Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ## Methods ### addElement() -Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. +Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. void addElement( in Element element @@ -286,7 +286,7 @@ Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet ### clearData() -Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet. +Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet. void clearData( [optional] in String type @@ -299,9 +299,9 @@ Supprime les données associées au type spécifié. L'argument type est facult ### getData() -Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée. +Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée. -Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop. +Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop. void getData( in String type @@ -314,7 +314,7 @@ Une erreur de sécurité se produira si vous tentez de récupérer des données ### setData() -Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type. +Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type. void setData( in String type, @@ -330,11 +330,11 @@ Définit une donnée pour le type spécifié. Si des données pour le type n'e ### setDragImage() -Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé. +Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé. -Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place. +Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place. -Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image. +Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image. void setDragImage( in Element image, @@ -353,15 +353,15 @@ Les coordonnées spécifient le décalage à l'intérieur de l'image spécifia ### mozClearDataAt() -Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un. +Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un. Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant `mozItemCount` par un. -Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. +Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. void mozClearDataAt( [optional] in String type, @@ -377,9 +377,9 @@ Si la liste `format` est vide, alors les données associées à tous les format ### mozGetDataAt() -Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. +Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. nsIVariant mozGetDataAt( [optional] in String type, @@ -395,11 +395,11 @@ Récupère les données associées au format donné pour un élément à l'index ### mozSetDataAt() -Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. +Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. -Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. +Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. -La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). +La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). > **Note :** Cette méthode est spécifique à Gecko. @@ -420,7 +420,7 @@ La donnée doit être une chaîne, ou un type primitif booléen, ou un type n ### mozTypesAt() -Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. +Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. > **Note :** Cette méthode est spécifique à Gecko. diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md index 6f8edf15bd..d0be63d3e4 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/DedicatedWorkerGlobalScope --- {{APIRef("Web Workers API")}} -L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). +L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). ## Propriétés _Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ - {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}} - - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. + - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. ### Propriétés héritées de WorkerGlobalScope @@ -43,7 +43,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalSco - {{domxref("WorkerGlobalScope.close()")}} - : Annule toute tâche en attente dans la boucle d'événement du `WorkerGlobalScope`, mettant alors fin à ce contexte précis. - {{domxref("DedicatedWorkerGlobalScope.postMessage")}} - - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. + - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. ### Héritées de WorkerGlobalScope diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md index 1082fed843..3eacb52494 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope/name --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. +La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. ## Syntaxe @@ -41,7 +41,7 @@ self.name | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md index b2ac98e787..40d3950896 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity --- {{ ApiRef("Device Orientation Events") }} -La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. +La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. -Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope. +Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope. ## Syntaxe diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md index b72ca21c2d..ac1a931119 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md @@ -26,7 +26,7 @@ Le constructeur **`DeviceMotionEvent`** crée un nouveau {{domxref("DeviceMotion - : Les options sont les suivantes : - - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) + - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) <sup>2</sup> diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md index f23131a75f..37cf4ab26b 100644 --- a/files/fr/web/api/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/index.md @@ -40,7 +40,7 @@ translation_of: Web/API/DeviceMotionEvent ```js window.addEventListener('devicemotion', function(event) { - console.log(event.acceleration.x + ' m/s2'); + console.log(event.acceleration.x + ' m/s2'); }); ``` diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md index 80f4374fac..4d69fc0266 100644 --- a/files/fr/web/api/devicemotionevent/interval/index.md +++ b/files/fr/web/api/devicemotionevent/interval/index.md @@ -19,7 +19,7 @@ La propriété **`interval`** renvoie la granularité temporelle, exprimée en m | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md index 6fead5a4c6..aee893522d 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.md +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/DeviceOrientationEvent.absolute --- {{ ApiRef() }} -Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. +Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md index 4c0b77dcab..96f5cf3108 100644 --- a/files/fr/web/api/deviceorientationevent/index.md +++ b/files/fr/web/api/deviceorientationevent/index.md @@ -36,7 +36,7 @@ L'évènement `DeviceOrientationEvent` met à la disposition du développeur des ```js window.addEventListener('deviceorientation', function(event) { - console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); + console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); }); ``` diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md index c96fba2151..11abff3fb4 100644 --- a/files/fr/web/api/document/adoptnode/index.md +++ b/files/fr/web/api/document/adoptnode/index.md @@ -21,7 +21,7 @@ Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans leq node = document.adoptNode(externalNode); - `node` - - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. + - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. - `externalNode` - : est le noeud à adopter existant dans un autre document. diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md index 6962f0342e..11b4d50036 100644 --- a/files/fr/web/api/document/alinkcolor/index.md +++ b/files/fr/web/api/document/alinkcolor/index.md @@ -11,22 +11,22 @@ translation_of: Web/API/Document/alinkColor --- {{APIRef("DOM")}}{{Deprecated_header}} -Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. +Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. ## Syntaxe var color = document.alinkColor; document.alinkColor = color; -*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) +*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) ## Notes -La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. +La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. -`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. +`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. -Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. +Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. [Gecko](/fr/docs/Glossary/Gecko) supporte `alinkColor`/`:active` et [`:focus`](/fr/docs/Web/CSS/:focus). Internet Explorer 6 et 7 supportent `alinkColor`/`:active` seulement pour la [balise HTML des liens (`<a>`)](/fr/docs/Web/HTML/Element/a) et le comportement est le même que `:focus` sur Gecko. Il n'y a pas de support pour `:focus` dans IE. diff --git a/files/fr/web/api/document/anchors/index.md b/files/fr/web/api/document/anchors/index.md index dca923de8e..d023a61896 100644 --- a/files/fr/web/api/document/anchors/index.md +++ b/files/fr/web/api/document/anchors/index.md @@ -4,7 +4,7 @@ slug: Web/API/Document/anchors translation_of: Web/API/Document/anchors original_slug: Web/API/Document/Document.anchors --- -{{APIRef("DOM")}} {{deprecated_header()}} +{{APIRef("DOM")}} {{deprecated_header()}} `anchors` retourne une liste de toutes les ancres du document. @@ -21,7 +21,7 @@ if ( document.anchors.length >= 5 ) { } ``` -L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : +L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : ```html <!DOCTYPE html> @@ -73,7 +73,7 @@ function init() { ## Notes -Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. +Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. ## Spécification diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md index 2969fbf7ed..3773488d4d 100644 --- a/files/fr/web/api/document/bgcolor/index.md +++ b/files/fr/web/api/document/bgcolor/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/bgColor --- {{APIRef("DOM")}} {{ Deprecated_header() }} -La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. +La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. ## Syntaxe @@ -22,9 +22,9 @@ La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (back ## Notes -La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). +La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). -`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. +`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a9fd2392a8..5620723d03 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -45,32 +45,32 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame ```js function insertBreakAtPoint(e) { - var range; - var textNode; - var offset; - - if (document.caretPositionFromPoint) { - range = document.caretPositionFromPoint(e.clientX, e.clientY); - textNode = range.offsetNode; - offset = range.offset; - - } else if (document.caretRangeFromPoint) { - range = document.caretRangeFromPoint(e.clientX, e.clientY); - textNode = range.startContainer; - offset = range.startOffset; - } - - // divise seulement les TEXT_NODE (noeuds texte) - if (textNode && textNode.nodeType == 3) { - var replacement = textNode.splitText(offset); - var br = document.createElement('br'); - textNode.parentNode.insertBefore(br, replacement); - } + var range; + var textNode; + var offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositi + textNode = range.offset + offset = range.offset; + + } else if (document.caretRangeFromPo + range = document.caretRange + + offset = range.startOffset; + } + + // divise seulement les TEXT_NODE (noeuds + if (textNode && textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } } var paragraphs = document.getElementsByTagName("p"); for (i=0 ; i < paragraphs.length; i++) { - paragraphs[i].addEventListener("click", insertBreakAtPoint, false); + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); } ``` diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md index e2ccc567e9..87e3d76c1b 100644 --- a/files/fr/web/api/document/clear/index.md +++ b/files/fr/web/api/document/clear/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Document/clear Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla. -Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. +Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. ## Syntaxe diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md index e0a238c8fd..b0a0da7dfa 100644 --- a/files/fr/web/api/document/compatmode/index.md +++ b/files/fr/web/api/document/compatmode/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Document/compatMode --- {{ ApiRef("DOM") }} -Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. +Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. ## Syntaxe @@ -18,16 +18,16 @@ Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mo ## Valeurs -- `"BackCompat"` si le document est a ffiché en mode "quirks" ; +- `"BackCompat"` si le document est a ffiché en mode "quirks" ; <!----> - mode - - : est une valeur énumérée qui peut être : + - : est une valeur énumérée qui peut être : <!----> -- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). +- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). <!----> diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md index 21309bbf71..6e1bcf036a 100644 --- a/files/fr/web/api/document/contenttype/index.md +++ b/files/fr/web/api/document/contenttype/index.md @@ -22,7 +22,7 @@ Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-t ## Notes -La propriété n'est pas affectée par les balises META. +La propriété n'est pas affectée par les balises META. ## Spécifications diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md index 42bd4f5991..e7a3015206 100644 --- a/files/fr/web/api/document/createattribute/index.md +++ b/files/fr/web/api/document/createattribute/index.md @@ -28,7 +28,7 @@ Un nœud {{domxref("Attr")}}. ### Exceptions levées -- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. +- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. ## Exemples diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index 98fcfd0f37..791aae2d6f 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -83,7 +83,7 @@ class ExpandingList extends HTMLUListElement { customElements.define('expanding-list', ExpandingList, { extends: 'ul' }); ``` -Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : +Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : ```js let expandingList = document.createElement('ul', { is : 'expanding-list' }) @@ -97,7 +97,7 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs @@ -114,4 +114,4 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ - {{domxref("Node.appendChild()")}} - {{domxref("Node.insertBefore()")}} - {{domxref("Node.hasChildNodes()")}} -- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. +- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md index d374570e70..5b543c6c3e 100644 --- a/files/fr/web/api/document/createelementns/index.md +++ b/files/fr/web/api/document/createelementns/index.md @@ -30,7 +30,7 @@ var element = document.createElementNS(namespaceURI, qualifiedName[, options]); - `qualifiedName` - : est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété [nodeName](/fr/docs/Web/API/Node/nodeName) de l'élément créé est initialisée avec la valeur de `qualifiedName` - `Options` {{Optional_Inline}} - - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. + - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. ### Valeur de retour @@ -84,7 +84,7 @@ Cet exemple crée un nouvel élément \<div> dans l'espace de noms [XHTML](/fr/d | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md index c89db358cf..945a292136 100644 --- a/files/fr/web/api/document/createnodeiterator/index.md +++ b/files/fr/web/api/document/createnodeiterator/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Document/createNodeIterator --- {{APIRef("DOM")}} -Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). +Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). ## Syntaxe @@ -147,9 +147,9 @@ var nodeIterator = document.createNodeIterator(root, whatToShow, filter); ```js var nodeIterator = document.createNodeIterator( - document.body, - NodeFilter.SHOW_ELEMENT, - function(node) { + document.body, + NodeFilter.SHOW_ELEMENT, + function(node) { return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; } ); @@ -157,7 +157,7 @@ var pars = []; var currentNode; while (currentNode = nodeIterator.nextNode()) { - pars.push(currentNode); + pars.push(currentNode); } ``` diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md index b4284bf5c7..d8eae2515e 100644 --- a/files/fr/web/api/document/creatensresolver/index.md +++ b/files/fr/web/api/document/creatensresolver/index.md @@ -26,7 +26,7 @@ Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les dé ## Notes -Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. +Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` ([cette approche](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace) fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur [comment créer un résolveur d'espace de nom défini par l'utilisateur](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur) si vous souhaitez adopter cette dernière approche. diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md index 48fd8b5010..1e0050e526 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.md +++ b/files/fr/web/api/document/createprocessinginstruction/index.md @@ -23,7 +23,7 @@ translation_of: Web/API/Document/createProcessingInstruction ### Paramètres - `Processing Instruction node` est un noeud {{domxref("ProcessingInstruction")}}. -- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). +- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). - `data` est une string (_chaîne de caractères_) contenant les données à ajouter aux données du noeud. ### Exceptions diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md index c40f105f7f..6efa380e69 100644 --- a/files/fr/web/api/document/createrange/index.md +++ b/files/fr/web/api/document/createrange/index.md @@ -16,7 +16,7 @@ Retourne un objet {{domxref("Range")}}. range = document.createRange(); -`range` devient un objet {{domxref("Range")}}. +`range` devient un objet {{domxref("Range")}}. ## Exemple @@ -29,7 +29,7 @@ range.setEnd(endNode, endOffset); ## Notes -Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. +Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. ## Spécification diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md index 030d29723b..230aebed60 100644 --- a/files/fr/web/api/document/createtreewalker/index.md +++ b/files/fr/web/api/document/createtreewalker/index.md @@ -166,7 +166,7 @@ while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | +| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md index cd9cfbe64a..9c4536274d 100644 --- a/files/fr/web/api/document/documentelement/index.md +++ b/files/fr/web/api/document/documentelement/index.md @@ -36,9 +36,9 @@ Pour tout document HTML non vide, `document.documentElement` sera toujours un é | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | -| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | -| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | +| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | +| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md index b3ee14255f..3021cc10dc 100644 --- a/files/fr/web/api/document/documenturi/index.md +++ b/files/fr/web/api/document/documenturi/index.md @@ -27,7 +27,7 @@ Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie l | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md index 88c81d247b..e66799067d 100644 --- a/files/fr/web/api/document/documenturiobject/index.md +++ b/files/fr/web/api/document/documenturiobject/index.md @@ -24,7 +24,7 @@ var uri = doc.documentURIObject; ## Exemple - // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », + // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », // en supposant que ce code s'exécute dans le contexte de browser.xul var uriObj = content.document.documentURIObject; diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md index 0f050e51e7..f4542e2c55 100644 --- a/files/fr/web/api/document/domain/index.md +++ b/files/fr/web/api/document/domain/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/domain --- {{ApiRef}} -Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). +Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). ## Syntaxe @@ -39,19 +39,19 @@ var domaine = document.domain; ## Notes -Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. +Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. -Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". +Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". -Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. +Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. -Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). +Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). ## Spécification -- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) -- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) +- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) +- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) ## Voir aussi -- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) +- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 787f2a1d16..34fea14e97 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -90,7 +90,7 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet ```css hidden body { display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .controls { diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md index f285e0a7b1..3a1ed6992a 100644 --- a/files/fr/web/api/document/drag_event/index.md +++ b/files/fr/web/api/document/drag_event/index.md @@ -134,7 +134,7 @@ L'événement drag est déclenché lorsqu'un élément ou une section de texte e | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md index 9c76951378..8ac8132e1e 100644 --- a/files/fr/web/api/document/dragend_event/index.md +++ b/files/fr/web/api/document/dragend_event/index.md @@ -132,7 +132,7 @@ L'événement **dragend** est déclenché lorsque une opération de glissement e | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateurs diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md index 4aff1b3c8d..c1bde307af 100644 --- a/files/fr/web/api/document/dragenter_event/index.md +++ b/files/fr/web/api/document/dragenter_event/index.md @@ -134,7 +134,7 @@ L'événement **dragenter** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatiblités navigateurs diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md index 6c5b8849bd..3cd24e1463 100644 --- a/files/fr/web/api/document/dragleave_event/index.md +++ b/files/fr/web/api/document/dragleave_event/index.md @@ -132,7 +132,7 @@ L'événement **dragleave** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md index c189df61a0..9c1a7b27e4 100644 --- a/files/fr/web/api/document/dragover_event/index.md +++ b/files/fr/web/api/document/dragover_event/index.md @@ -134,7 +134,7 @@ L'événement **dragover** est déclenché lorsqu'un élément ou une sélection | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 152aeaeb86..afaa26a6a2 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -51,7 +51,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> + </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> @@ -61,77 +61,77 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él ### CSS Content ```css - #draggable { - width: 200px; - height: 20px; - text-align: center; - background: white; - } - - .dropzone { - width: 200px; - height: 20px; - background: blueviolet; - margin-bottom: 10px; - padding: 10px; - } + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } ``` ### JavaScript Content ```js - var dragged; - - /* Les événements sont déclenchés sur les objets glissables */ - document.addEventListener("drag", function( event ) { - - }, false); - - document.addEventListener("dragstart", function( event ) { - // Stocke une référence sur l'objet glissable - dragged = event.target; - // transparence 50% - event.target.style.opacity = .5; - }, false); - - document.addEventListener("dragend", function( event ) { - // reset de la transparence - event.target.style.opacity = ""; - }, false); - - /* Les événements sont déclenchés sur les cibles du drop */ - document.addEventListener("dragover", function( event ) { - // Empêche default d'autoriser le drop - event.preventDefault(); - }, false); - - document.addEventListener("dragenter", function( event ) { - // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre - if ( event.target.className == "dropzone" ) { - event.target.style.background = "purple"; - } - - }, false); - - document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent - if ( event.target.className == "dropzone" ) { - event.target.style.background = ""; - } - - }, false); - - document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) - event.preventDefault(); - // Déplace l'élément traîné vers la cible du drop sélectionnée - if ( event.target.className == "dropzone" ) { - event.target.style.background = ""; - dragged.parentNode.removeChild( dragged ); - event.target.appendChild( dragged ); - } - - }, false); + var dragged; + + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); + + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche default d'autoriser le drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); ``` {{ EmbedLiveSample('Exemple_dropzone') }} @@ -140,7 +140,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md index 539c0d9ce2..ebeb951ef1 100644 --- a/files/fr/web/api/document/drop_event/index.md +++ b/files/fr/web/api/document/drop_event/index.md @@ -134,7 +134,7 @@ L'événement **drop** est déclenché lorsqu'un élément ou une sélection de | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}} | {{Spec2("HTML5.1")}} | Première définition | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md index cbd5891099..fcee637525 100644 --- a/files/fr/web/api/document/elementfrompoint/index.md +++ b/files/fr/web/api/document/elementfrompoint/index.md @@ -57,4 +57,4 @@ Si le point spécifié est en dehors de la portion visible du document ou que l' ### Spécification -- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) +- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index 275ad2f1e8..637b6f42b3 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). +La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). ## Syntaxe @@ -82,4 +82,4 @@ if (document.elementsFromPoint) { ## Voir aussi - {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}} -- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} +- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md index ac899fc8c4..f5a8b65ad3 100644 --- a/files/fr/web/api/document/enablestylesheetsforset/index.md +++ b/files/fr/web/api/document/enablestylesheetsforset/index.md @@ -26,7 +26,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Notes - Les correspondances de titre sont sensibles à la casse. -- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. +- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. - Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode. - Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}. @@ -36,7 +36,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Spécifications -- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md index 44ea0ed1da..39de25eb09 100644 --- a/files/fr/web/api/document/evaluate/index.md +++ b/files/fr/web/api/document/evaluate/index.md @@ -26,17 +26,17 @@ La méthode **`evaluate()`** renvoie un {{domxref("XPathResult")}} basé sur une - `xpathExpression` est une chaîne de caractères représentant le XPath à évaluer. - `contextNode` spécifie le noeud de contexte pour la requête (voir [XPath specification](http://www.w3.org/TR/xpath)) . Il est courant de transmettre un document en tant que nœud de contexte. - `namespaceResolver` est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. `null` est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé. -- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. -- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult +- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. +- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult ## Exemples ```js - var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); + var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); /* Cherche le document pour tout élément h2. * Le résultat sera probablement un itérateur de noeuds non ordonné. */ - var thisHeading = headings . iterateNext ( ) ; - var alertText = "Level 2 headings in this document are:\n" ; + var thisHeading = headings . iterateNext ( ) ; + var alertText = "Level 2 headings in this document are:\n" ; while ( thisHeading ) { alertText + = thisHeading . textContent + "\n" ; thisHeading = headings . iterateNext ( ) ; @@ -52,9 +52,9 @@ Une optimisation supplémentaire peut être obtenue en utilisant soigneusement l document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); ``` -Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) +Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) -Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. +Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. ## Notes diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md index 9331ece590..d8f7419e5d 100644 --- a/files/fr/web/api/document/forms/index.md +++ b/files/fr/web/api/document/forms/index.md @@ -90,7 +90,7 @@ var selectFormElement = document.forms[index].elements[index]; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 9deb984230..9d8c81d41c 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} -La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. +La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}. @@ -56,9 +56,9 @@ function changeColor(newColor) { ## Notes d'utilisation -L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. +L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. -Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. +Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. ## Autre exemple @@ -96,7 +96,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el vaudra null ! ``` -**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. +**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. ## Spécification @@ -107,7 +107,7 @@ var el = document.getElementById('testqq'); // el vaudra null ! | {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM3 Core')}} | Remplace DOM 2 | | {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} | {{Spec2('DOM WHATWG')}} | Remplacera DOM 3 | -Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) +Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md index 02659c2a50..93148bfffb 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.md +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -23,15 +23,15 @@ Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les ## Exemples -Trouve tous les éléments ayant la classe « test » : +Trouve tous les éléments ayant la classe « test » : document.getElementsByClassName('test') -Trouve tous les éléments ayant les classes « rouge » et « test » : +Trouve tous les éléments ayant les classes « rouge » et « test » : document.getElementsByClassName('rouge test') -Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : +Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : document.getElementById('main').getElementsByClassName('test') @@ -46,7 +46,7 @@ var testDivs = Array.prototype.filter.call(testElements, function(testElement){ XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code> -## Obtenir la classe des éléments test +## Obtenir la classe des éléments test C'est la méthode d'opération la plus couramment utilisée. diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md index dd734d067d..f4f90ae38b 100644 --- a/files/fr/web/api/document/getelementsbyname/index.md +++ b/files/fr/web/api/document/getelementsbyname/index.md @@ -54,7 +54,7 @@ La méthode **getElementsByName** fonctionne différemment dans différents navi | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale | ## Voir aussi diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md index 5ba9a313ba..77710b3537 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.md +++ b/files/fr/web/api/document/getelementsbytagname/index.md @@ -17,9 +17,9 @@ Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise var elements = document.getElementsByTagName(name); - `elements` est une liste de nœuds (`NodeList`) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre. -- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». +- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». -> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. +> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. ## Exemple @@ -94,7 +94,7 @@ Lorsqu'elle est appelée sur un document HTML, `getElementsByTagName()` classe s ## Spécifications -- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) +- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) ## Voir aussi diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md index e57571e2f3..be2cbd7104 100644 --- a/files/fr/web/api/document/hasfocus/index.md +++ b/files/fr/web/api/document/hasfocus/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/hasFocus --- {{ ApiRef() }} -La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. +La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. > **Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus. diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md index 2aaeb008e4..427820b99a 100644 --- a/files/fr/web/api/document/images/index.md +++ b/files/fr/web/api/document/images/index.md @@ -32,5 +32,5 @@ for(var i = 0; i < listeimg.length; i++) { ## Spécification -- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) -- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) +- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) +- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md index 65c30cb570..c933fd88bb 100644 --- a/files/fr/web/api/document/importnode/index.md +++ b/files/fr/web/api/document/importnode/index.md @@ -52,7 +52,7 @@ Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Doc | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | | {{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md index 273a712654..483e85f3b4 100644 --- a/files/fr/web/api/document/index.md +++ b/files/fr/web/api/document/index.md @@ -71,13 +71,13 @@ _Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref(" - {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}} - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place. - {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}} - - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. + - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. - {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}} - : retourne un {{jsxref("Boolean")}} qui est `true` _(vrai)_ seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire. -- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} +- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - : L'élément qui est actuellement affiché en mode plein écran pour ce document. - {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. + - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. - {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}} - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document. - {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}} @@ -107,7 +107,7 @@ L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} : ### Extensions du document HTML -L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. +L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. - {{domxref("Document.activeElement")}} {{readonlyinline}} - : Renvoie l'élément courant qui a la focus. @@ -123,7 +123,7 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref <!----> - {{domxref("Document.body")}} - - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. + - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. - {{domxref("Document.cookie")}} - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie. @@ -162,15 +162,15 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant. - {{domxref("Document.plugins")}} {{readonlyinline}} - : Renvoie une liste des plugins disponibles. -- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} +- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} - : retourne l'état du chargement du document. - {{domxref("Document.referrer")}} {{readonlyinline}} - : Renvoie l'URI de la page qui a amené à cette page. - {{domxref("Document.scripts")}} {{readonlyinline}} - - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. + - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. - {{domxref("Document.title")}} - : Renvoie le titre du document courant. -- {{domxref("Document.URL")}} {{readonlyInline}} +- {{domxref("Document.URL")}} {{readonlyInline}} - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant. <!----> @@ -191,12 +191,12 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.oncut")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} . - {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. - {{domxref("Document.onfullscreenerror")}} {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. - {{domxref("Document.onpaste")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} . @@ -207,9 +207,9 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}} - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} . - {{domxref("Document.onselectionchange")}} {{experimental_inline}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. - {{domxref("Document.onvisibilitychange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. - {{domxref("Document.onwheel")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} . @@ -313,7 +313,7 @@ L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} : - {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}} - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés. -L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : +L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : - {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}} - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). @@ -322,7 +322,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") - {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}} - : évalue l'expression XPath . -### Extensions pour les documents HTML +### Extensions pour les documents HTML - {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}} - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien. @@ -365,7 +365,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") | {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | en vue de remplacer DOM 3 | | {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}} | {{Spec2('HTML WHATWG')}} | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` | | {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}} | {{Spec2('DOM3 XPath')}} | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document. | -| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | +| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | | {{SpecName('HTML Editing','#dom-document-getselection','Document')}} | {{Spec2('HTML Editing')}} | Étend l'interface `Document` | | {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM View')}} | Étend l'interface `Document` | | {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM')}} | Étend l'interface `Document` | @@ -380,7 +380,7 @@ Mozilla définit un ensemble de propriétés non-standard créées seulement pou - {{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution. - {{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}} - - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). + - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). - {{domxref("document.popupNode")}} - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle. - {{domxref("document.tooltipNode")}} @@ -402,7 +402,7 @@ Mozilla a également défini quelques méthodes non standard : Microsoft a défini quelques propriétés non standard : - {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}} - - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). + - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document : diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md index 98da11d1ce..1e43deab33 100644 --- a/files/fr/web/api/document/lastmodified/index.md +++ b/files/fr/web/api/document/lastmodified/index.md @@ -20,13 +20,13 @@ alert(document.lastModified); // renvoie: 11/28/2015 16:11:15 ``` -### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) +### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) ```js var oLastModif = new Date(document.lastModified); ``` -### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. +### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. ```js var nLastModif = Date.parse(document.lastModified); @@ -38,8 +38,8 @@ Veuillez noter qu'en tant que chaîne de caractères, `lastModified` ne peut êt ```js if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - alert("Cette page a changé !"); + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + alert("Cette page a changé !"); } ``` @@ -48,20 +48,20 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:( ```js var - nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), - nLastModif = Date.parse(document.lastModified); + nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), + nLastModif = Date.parse(document.lastModified); if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - if (isFinite(nLastVisit)) { - alert("Cette page a changé !"); - } + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + if (isFinite(nLastVisit)) { + alert("Cette page a changé !"); + } } ``` -> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) +> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) -Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). +Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). ## Spécification diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md index c0fb8e8080..5a991bfa3d 100644 --- a/files/fr/web/api/document/laststylesheetset/index.md +++ b/files/fr/web/api/document/laststylesheetset/index.md @@ -27,7 +27,7 @@ var lastSheetSet = document.lastStyleSheetSet; if (!lastSheetSet) { lastSheetSet = "Sheet not yet changed"; } -console.log("The last sheet set is: " + lastSheetSet); +console.log("The last sheet set is: " + lastSheetSet); ``` ## Voir aussi @@ -39,4 +39,4 @@ console.log("The last sheet set is: " + lastSheetSet); ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md index 5b9fabd4e9..a92f7d73dd 100644 --- a/files/fr/web/api/document/location/index.md +++ b/files/fr/web/api/document/location/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Document/location --- La propriété en lecture seule **`Document.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location), contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL. -Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. +Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. -Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée. +Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée. Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est _null_. diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md index c91cbf97fd..f5e689a2a2 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.md +++ b/files/fr/web/api/document/mozsetimageelement/index.md @@ -43,7 +43,7 @@ Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque foi </style> ``` -Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. +Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. ```js var c = 0x00; diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md index 8a9529ff35..7f2646f759 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.md +++ b/files/fr/web/api/document/mozsyntheticdocument/index.md @@ -25,7 +25,7 @@ Il peut être utile, si vous avez un élément de menu contextuel que vous souha var isSynthetic = document.mozSyntheticDocument; if (isSynthetic) { - /* insert your menu item here */ + /* insert your menu item here */ } ## Spécifications diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md index c2bdbdf88f..41c55f6646 100644 --- a/files/fr/web/api/document/ononline/index.md +++ b/files/fr/web/api/document/ononline/index.md @@ -20,12 +20,12 @@ Un évènement "`online`" est lancé sur le `<body>` (_corps_) de chaque page qu Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles : - en utilisant [`addEventListener`](/en/DOM/element.addEventListener) sur `window`, `document` ou `document.body` -- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). -- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. +- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). +- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. ## Exemple -Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. +Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. ## Références diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md index c427d5df05..7832387d17 100644 --- a/files/fr/web/api/document/open/index.md +++ b/files/fr/web/api/document/open/index.md @@ -32,7 +32,7 @@ Par ailleurs, un appel automatique à `document.open()` est réalisé lorsque [d Cette méthode ne doit pas être confondue avec [window.open()](/fr/docs/Web/API/Window/open). `document.open` permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que `window.open` fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme `window` est l'objet, si on appelle juste `open(...)`, il sera traité comme un appel à `window.open(...)`. Le document ouvert peut être fermé à l'aide de [document.close()](/fr/docs/Web/API/Document/close). -Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. +Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. Si vous ne voulez pas créer une entrée d'historique, remplacez `open()` par `open("text/html", "replace")`. diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md index 326c3eef82..b2a08c557c 100644 --- a/files/fr/web/api/document/origin/index.md +++ b/files/fr/web/api/document/origin/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/origin --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. +La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. ## Exemples diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md index c27b61b7a9..50606d7e56 100644 --- a/files/fr/web/api/document/popupnode/index.md +++ b/files/fr/web/api/document/popupnode/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/popupNode > **Note :** À partir de Gecko 2.0, les auteurs sont encouragés à utiliser la propriété `triggerNode` de `menupopup` à la place. -Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. +Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs `popup` ou `context`. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode [showPopup](/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup) de la fenêtre contextuelle, vous pouvez définir la propriété `popupNode` directement au préalable. diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md index 9dabb35946..41df97cc20 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.md +++ b/files/fr/web/api/document/preferredstylesheetset/index.md @@ -34,7 +34,7 @@ if (document.preferredStyleSheetSet) { ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md index 5b3e19ea84..1829792eb0 100644 --- a/files/fr/web/api/document/queryselector/index.md +++ b/files/fr/web/api/document/queryselector/index.md @@ -14,9 +14,9 @@ translation_of: Web/API/Document/querySelector --- {{ ApiRef("DOM") }} -La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. +La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. -> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. +> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. ## Syntaxe @@ -27,13 +27,13 @@ element = document.querySelector(sélecteurs); ### Paramètres - `selectors` (sélecteurs) - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. > **Note :** les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations. ### Valeur retournée -Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. +Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place. @@ -44,13 +44,13 @@ Si vous avez besoin d'une liste de tous les éléments correspondant aux sélect ## Notes d'utilisation -Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. +Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. Les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) CSS ne retourneront jamais aucun élément, comme spécifié dans l'[API des sélecteurs](http://www.w3.org/TR/selectors-api/#grammar) (en). ### Caractère spécial d'échappement -Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : +Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : ```html <div id="machin\bidule"></div> @@ -73,7 +73,7 @@ Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte p ### Trouver le premier élément correspondant à une classe -Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : +Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : ```js var el = document.querySelector(".maclasse"); @@ -81,7 +81,7 @@ var el = document.querySelector(".maclasse"); ### Un sélecteur plus complexe -Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : +Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : ```js var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']"); @@ -91,7 +91,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | -| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | +| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | | {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition initiale | ## Compatibilité des navigateurs @@ -101,7 +101,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i ## Voir aussi - [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) -- {{domxref("document.querySelectorAll()")}} ; -- {{domxref("element.querySelector()")}} ; -- {{domxref("element.querySelectorAll()")}} ; +- {{domxref("document.querySelectorAll()")}} ; +- {{domxref("element.querySelector()")}} ; +- {{domxref("element.querySelectorAll()")}} ; - [Extraits de code pour `querySelector`](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md index 07088e2c73..fcc315b3ea 100644 --- a/files/fr/web/api/document/queryselectorall/index.md +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/Document/querySelectorAll --- {{APIRef("DOM")}} -La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. +La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. -> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . +> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . ## Syntaxe @@ -24,7 +24,7 @@ elementList = parentNode.querySelectorAll(selectors); ### Paramètres - `selecteurs` - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. > **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations. @@ -32,7 +32,7 @@ elementList = parentNode.querySelectorAll(selectors); Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée . -> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. +> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. ### Exceptions @@ -41,13 +41,13 @@ Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} p ## Exemples -Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : +Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : ```js const matches = document.querySelectorAll("p"); ``` -Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : +Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : ```js const matches = document.querySelectorAll("div.note, div.alert"); @@ -89,7 +89,7 @@ highlightedItems.forEach(function(userItem) { ## Notes d'utilisation -`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. +`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. ### HTML @@ -144,4 +144,4 @@ inner.length; // 0 - {{domxref("document.querySelector")}} - {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}} - {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}} -- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) +- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md index 527d72e815..c256925113 100644 --- a/files/fr/web/api/document/readystate/index.md +++ b/files/fr/web/api/document/readystate/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Document/readyState --- {{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }} -La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. +La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. -À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. +À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. ## Syntaxe @@ -20,14 +20,14 @@ La valeur **Document.readyState** est une propriété de {{ domxref("document") ### Valeurs -La variable `readyState` peut valoir : +La variable `readyState` peut valoir : - **`loading`** - : Le {{ domxref("document") }} est encore en chargement. - **`interactive`** - - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. + - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. - **`complete`** - - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. + - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. ## Exemples @@ -51,7 +51,7 @@ switch (document.readyState) { } ``` -### readystatechange comme alternative à DOMContentLoaded +### readystatechange comme alternative à DOMContentLoaded ```js // alternative à DOMContentLoaded @@ -62,7 +62,7 @@ document.onreadystatechange = function () { } ``` -### readystatechange comme alternative à load +### readystatechange comme alternative à load ```js // alternative à load @@ -73,7 +73,7 @@ document.onreadystatechange = function () { } ``` -### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded +### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded ```js // Modification du document <body> dès que possible en utilisant un script externe @@ -96,11 +96,11 @@ document.addEventListener('readystatechange', bootstrap, false); {{Compat("api.Document.readyState")}} -\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). +\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). -\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. +\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. -\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. +\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. ## Voir aussi diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md index 8de026571e..e516c6b2a7 100644 --- a/files/fr/web/api/document/readystatechange_event/index.md +++ b/files/fr/web/api/document/readystatechange_event/index.md @@ -49,7 +49,7 @@ document.onreadystatechange = function () { ## Navigateur compatible -Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). +Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). ## Les événements liés diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md index cb59bff3ef..71c47298d4 100644 --- a/files/fr/web/api/document/registerelement/index.md +++ b/files/fr/web/api/document/registerelement/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Document/registerElement {{draft}} -La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. +La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. -> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). +> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). ## Syntaxe @@ -27,7 +27,7 @@ La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [ ### Paramètres - _nom-tag_ - - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. + - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. - _options {{optional_inline}}_ - : Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre. diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md index 8ec18bf3a4..c41e7f5566 100644 --- a/files/fr/web/api/document/selectedstylesheetset/index.md +++ b/files/fr/web/api/document/selectedstylesheetset/index.md @@ -28,7 +28,7 @@ La définition de la valeur de cette propriété équivaut à appeler {{ domxref ## Exemple ```js -console.log("Current style sheet set: " + document.selectedStyleSheetSet); +console.log("Current style sheet set: " + document.selectedStyleSheetSet); document.selectedStyleSheetSet = "Some other style sheet"; ``` @@ -44,4 +44,4 @@ document.selectedStyleSheetSet = "Some other style sheet"; ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md index 194e6044aa..635d0059f6 100644 --- a/files/fr/web/api/document/stylesheets/index.md +++ b/files/fr/web/api/document/stylesheets/index.md @@ -21,8 +21,8 @@ Il s'agit d'une collection ordonnée d'objets [`CSSStyleSheet`](/fr/docs/Web/API | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | -| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | +| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | ## Voir aussi diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md index abcabe2e9a..3cef3453fe 100644 --- a/files/fr/web/api/document/title/index.md +++ b/files/fr/web/api/document/title/index.md @@ -11,11 +11,11 @@ Obtient ou défini le titre de la page. var docTitle = document.title; -`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). +`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). document.title = newTitle; -`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). +`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). ## Exemple @@ -39,11 +39,11 @@ alert(document.title); // Affiche "Goodbye World!" ## Notes -Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. +Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. -Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. +Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. -En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). +En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). ## Spécification diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md index c962feeb7d..8b368ac63e 100644 --- a/files/fr/web/api/document/transitionend_event/index.md +++ b/files/fr/web/api/document/transitionend_event/index.md @@ -34,13 +34,13 @@ L’évènement **`transitionend`** est émis quand une [transition CSS](/fr/doc </tbody> </table> -L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. +L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. La cible originale pour cet évènement est l’[`Element`](/en-US/docs/Web/API/Element) sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page [HTMLElement: transitionend](/fr/docs/Web/Events/transitionend). ## Exemples -Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : +Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : ```js document.addEventListener('transitionend', () => { @@ -48,7 +48,7 @@ document.addEventListener('transitionend', () => { }); ``` -La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : +La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : ```js document.ontransitionend = () => { @@ -72,7 +72,7 @@ document.ontransitionend = () => { - Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}} - L’interface {{domxref("TransitionEvent")}} -- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} -- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) -- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) -- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) +- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} +- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) +- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) +- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md index 454dde3afb..d77a3890b9 100644 --- a/files/fr/web/api/document/url/index.md +++ b/files/fr/web/api/document/url/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/URL --- {{APIRef("DOM")}} -Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). +Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). ## Syntaxe diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md index 51d43852c7..9087043978 100644 --- a/files/fr/web/api/document/visibilitystate/index.md +++ b/files/fr/web/api/document/visibilitystate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/visibilityState La propriété en lecture seule **`Document.visibilityState`** renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont : - **`'visible'`** : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite. -- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. +- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. - **`'prerender'`** (_prérendu_) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de [`document.hidden`](/en-US/docs/Web/API/Document/hidden)). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif. - **`'unloaded`'** (_déchargé_) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif. diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md index bd02da9607..9ac2720827 100644 --- a/files/fr/web/api/document/width/index.md +++ b/files/fr/web/api/document/width/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Document/width > **Note :** À partir de {{Gecko("6.0")}},` document.width `n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}. -Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. +Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. Non pris en charge par Internet Explorer. diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md index d0655d473b..36fae8aeb0 100644 --- a/files/fr/web/api/document/write/index.md +++ b/files/fr/web/api/document/write/index.md @@ -38,7 +38,7 @@ function nouveauContenu() { alert("chargement du nouveau contenu"); document.open(); -document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); +document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); document.close(); } @@ -55,7 +55,7 @@ document.close(); Écrire dans un document qui a déjà été chargé sans appeler [document.open()](/fr/docs/Web/API/Document/open) provoquera un appel automatique à `document.open`. Une fois l'écriture terminée, il est recommandé d'appeler [document.close()](/fr/docs/Web/API/Document/close) pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément `h1` devient un nœud dans le document. -Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : +Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : ```html <script> @@ -65,7 +65,7 @@ Si l'appel à `document.write()` est intégré directement dans le code HTML, il > **Note :** `document.write` et [`document.writeln`](/fr/docs/Web/API/Document/writeln) ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur « Operation is not supported \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] » dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier `.xhtm` ou pour tout document servi avec une `application/xhtml+xml` de [type MIME](/fr/docs/Glossary/MIME_type). Plus d'informations disponibles dans la [foire aux questions W3C XHTML (en anglais)](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite). -> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. +> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. > **Note :** Dans Edge seulement, appeler plusieurs fois `document.write` dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." _(autorisation refusée)_. diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md index 73b9895781..194f164a45 100644 --- a/files/fr/web/api/document/xmlversion/index.md +++ b/files/fr/web/api/document/xmlversion/index.md @@ -17,7 +17,7 @@ Renvoie le numéro de version comme spécifié dans la déclaration XML (par exe Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) : if (document.createElement("foo").tagName == "FOO") { - /* le document n'est pas XML */ + /* le document n'est pas XML */ } ## Spécifications diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md index b9a9de6176..c375012c2f 100644 --- a/files/fr/web/api/document_object_model/examples/index.md +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -9,9 +9,9 @@ original_slug: Web/API/Document_Object_Model/Exemples --- Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document. -## Exemple 1 : _height_ (hauteur) et width _(largeur)_ +## Exemple 1 : _height_ (hauteur) et width _(largeur)_ -L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : +L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : ```html <!DOCTYPE html> @@ -67,7 +67,7 @@ function init() { </html> ``` -## Exemple 2 : attributs d'image +## Exemple 2 : attributs d'image ```html <!DOCTYPE html> @@ -99,7 +99,7 @@ function setBorderWidth(width) { </html> ``` -## Exemple 3 : manipulation de styles +## Exemple 3 : manipulation de styles Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers. @@ -130,7 +130,7 @@ function changeText() { </html> ``` -## Exemple 4 : utilisation de feuilles de style +## Exemple 4 : utilisation de feuilles de style La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console. @@ -144,19 +144,19 @@ for(var i = 0; i < ss.length; i++) { } ``` -Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : +Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : BODY { background-color: darkblue; } P { font-face: Arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } -Ce script affiche les lignes suivantes : +Ce script affiche les lignes suivantes : BODY P #LUMPY -## Exemple 5 : propagation d'évènements +## Exemple 5 : propagation d'évènements Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau. @@ -205,7 +205,7 @@ function load() { </html> ``` -## Exemple 6 : getComputedStyle +## Exemple 6 : getComputedStyle Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference). @@ -266,9 +266,9 @@ function cStyles() { </html> ``` -## Exemple 7 : affichage des propriétés d'un objet `event` +## Exemple 7 : affichage des propriétés d'un objet `event` -Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. +Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires. @@ -338,11 +338,11 @@ window.onload = function(event){ </html> ``` -## Exemple 8 : utilisation de l'interface DOM Table +## Exemple 8 : utilisation de l'interface DOM Table L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}} -Pour ajouter une ligne et quelques cellules à un tableau existant : +Pour ajouter une ligne et quelques cellules à un tableau existant : ```html <table id="table0"> diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md index ff8be434b7..bf3aeb8e06 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -12,7 +12,7 @@ Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR ### Créer dynamiquement un arbre DOM -Considérons le document XML suivant : +Considérons le document XML suivant : <?xml version="1.0"?> <people> @@ -28,7 +28,7 @@ Considérons le document XML suivant : </person> </people> -L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : +L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : var doc = document.implementation.createDocument("", "", null); var peopleElem = doc.createElement("people"); @@ -129,7 +129,7 @@ Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme i ### Et après ? -Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. +Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement. diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md index fffb6dd481..3eb4da7179 100644 --- a/files/fr/web/api/document_object_model/index.md +++ b/files/fr/web/api/document_object_model/index.md @@ -24,7 +24,7 @@ Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible - {{domxref("Document")}} - {{domxref("DocumentFragment")}} - {{domxref("DocumentType")}} -- {{domxref("DOMError")}} {{deprecated_inline}} +- {{domxref("DOMError")}} {{deprecated_inline}} - {{domxref("DOMException")}} - {{domxref("DOMImplementation")}} - {{domxref("DOMString")}} diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 6bef94aea1..b1c2d8f1d6 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -61,7 +61,7 @@ function generate_table() { {{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} -Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : +Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 1. On crée d'abord l'élément \<table>. 2. Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>. @@ -69,7 +69,7 @@ Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 4. Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>. 5. Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau. -Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : +Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : 1. On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant @@ -93,7 +93,7 @@ Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse. -Voici l'HTML généré par ce code JavaScript : +Voici l'HTML généré par ce code JavaScript : ... <table border="2"> @@ -102,7 +102,7 @@ Voici l'HTML généré par ce code JavaScript : </table> ... -Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants : +Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :  @@ -165,7 +165,7 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen  -Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement : +Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement : myP.style.background = "rgb(255,0,0)"; // ajoute une propriété de style inline @@ -186,15 +186,15 @@ En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous d myP.appendChild(noeudTexte); -En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document : +En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :  -> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. +> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. ### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)` -Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : +Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : nouveauNoeudBALISEP = document.createElement("p"); body.appendChild(nouveauNoeudBALISEP); @@ -203,15 +203,15 @@ Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `creat ### Suppression de nœuds avec la méthode `removeChild(...)` -Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : +Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : myP.removeChild(noeudTexte); -Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : +Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : nouveauNoeudBALISEP.appendChild(noeudTexte); -L'arborescence des objets se présente désormais comme ceci : +L'arborescence des objets se présente désormais comme ceci :  @@ -225,7 +225,7 @@ Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. L ### Création et insertion des éléments dans l'arborescence -On peut décomposer la création du tableau de Exemple1.html en trois étapes : +On peut décomposer la création du tableau de Exemple1.html en trois étapes : - Récupérer l'objet body (c'est le premier élément de l'objet document). - Créer tous les éléments. @@ -233,7 +233,7 @@ On peut décomposer la création du tableau de Exemple1.html en trois étapes : Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1. -> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. +> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. ```html <head> @@ -305,7 +305,7 @@ mybody.appendChild(currenttext); ### Récupérer la valeur d'un attribut -A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : +A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : ```html mytable.getAttribute("border"); @@ -328,7 +328,7 @@ Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez défini row = document.createElement("tr"); for(var i = 0; i < 2; i++) { cell = document.createElement("td"); - text = document.createTextNode("la cellule est :" + i + j); + text = document.createTextNode("la cellule est :" + i + j); cell.appendChild(text); row.appendChild(cell); // change la couleur de fond de la cellule diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 99b70402e6..76c73f3401 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -8,7 +8,7 @@ Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier ## Définition d'un arbre de contenu -Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : +Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : <html> <head> @@ -24,11 +24,11 @@ Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage. -Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.) +Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.) ## Ce que permet le DOM Level 1 Core -Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. +Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. ## Un exemple simple diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md index e20754093f..a31d9ee26d 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.md +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -7,12 +7,12 @@ translation_of: Web/API/Document_Object_Model/Whitespace --- ## Le problème -La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : +La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : - il y aura certains nœuds texte qui ne contiendront que du vide, et - certains nœuds texte commenceront ou se termineront par des blancs. -En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : +En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : <!-- My document --> <html> @@ -58,7 +58,7 @@ On peut formater leur code comme indiqué ci-dessous pour contourner le problèm ></div> ``` -Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : +Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : ```js /** @@ -76,7 +76,7 @@ Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipul /** * Détermine si le contenu du texte d'un nœud est entièrement blanc. * - * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, + * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| * @return True (vrai) Si tout le contenu du texte du |nod| est un espace, * sinon false (faux). @@ -91,7 +91,7 @@ function is_all_ws( nod ) /** * Détermine si le nœud doit être ignoré par les fonctions d'itération. * - * @param nod Un objet implémentant l'interface DOM1 |Node|. + * @param nod Un objet implémentant l'interface DOM1 |Node|. * @return true (vrai) si le nœud est : * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| @@ -111,7 +111,7 @@ function is_ignorable( nod ) * un enfant du même parent, qui se produit immédiatement avant le * nœud référence.) * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -129,7 +129,7 @@ function node_before( sib ) * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -149,7 +149,7 @@ function node_after( sib ) * de tous les nœuds DOM qui donnent le dernier des nœuds contenus * directement dans le nœud de référence.) * - * @param sib Le nœud référence. + * @param sib Le nœud référence. * @return soit : * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -169,7 +169,7 @@ function last_child( par ) * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * - * @param sib le nœud référence. + * @param sib le nœud référence. * @return soit: * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -190,7 +190,7 @@ function first_child( par ) * et termine et normalise tous les espaces dans un seul espace. (Normalement * |data | est une propriété des nœuds de texte qui donne le texte du nœud.) * - * @param txt Le nœud de texte dont les données doivent être renvoyées + * @param txt Le nœud de texte dont les données doivent être renvoyées * @return Une chaîne donnant le contenu du nœud de texte avec * espace blanc s'est effondré. */ diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md index 753d6f303c..b8094de37e 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.md +++ b/files/fr/web/api/documentfragment/documentfragment/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/DocumentFragment/DocumentFragment --- {{ApiRef("DOM")}}{{seeCompatTable}} -Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. +Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. ## Syntaxe diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md index c9b72f6c7b..f23d650ab6 100644 --- a/files/fr/web/api/documenttype/index.md +++ b/files/fr/web/api/documenttype/index.md @@ -27,7 +27,7 @@ _Cette interface hérite de propriétés de la part de son parent, {{domxref("No - {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}} - : Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "\<! ELEMENT foo (bar)"> - {{domxref("DocumentType.name")}} {{readonlyInline}} - - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. + - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. - {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}} - : une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}. - {{domxref("DocumentType.publicId")}} {{readonlyInline}} @@ -48,7 +48,7 @@ _Cette interface hérite de méthodes de la part de son parent, {{domxref("Node" | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}} | {{Spec2('DOM WHATWG')}} | Implémente désormais l'interface {{domxref("ChildNode")}}. Retrait des propriétés `internalSubset`, `entities` et `notation`. | | {{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | -| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | +| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | | {{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md index c0aa91a55b..2bb2691b16 100644 --- a/files/fr/web/api/domerror/index.md +++ b/files/fr/web/api/domerror/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMError --- {{ APIRef("DOM") }}{{deprecated_header}} -L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. +L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. ## Propriétés diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md index 0c3e390c86..350bd56375 100644 --- a/files/fr/web/api/domexception/index.md +++ b/files/fr/web/api/domexception/index.md @@ -37,45 +37,45 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `IndexSizeError` - : L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : `1` et nom de la constante héritée : `INDEX_SIZE_ERR`) - `HierarchyRequestError` - - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) + - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) - `WrongDocumentError` - - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) + - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) - `InvalidCharacterError` - - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) + - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) - `NoModificationAllowedError` - - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) + - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) - `NotFoundError` - - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) + - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) - `NotSupportedError` - - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) + - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) - `InvalidStateError` - - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) + - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) - `SyntaxError` - - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) + - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) - `InvalidModificationError` - - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) + - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) - `NamespaceError` - - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) + - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) - `InvalidAccessError` - - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) + - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) - `TypeMismatchError` {{deprecated_inline}} - - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. + - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. - `SecurityError` {{experimental_inline}} - - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) + - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) - `NetworkError` {{experimental_inline}} - - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) + - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) - `AbortError` {{experimental_inline}} - - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) + - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) - `URLMismatchError` {{experimental_inline}} - - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) + - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) - `QuotaExceededError` {{experimental_inline}} - - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) + - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) - `TimeoutError` {{experimental_inline}} - - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) + - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) - `InvalidNodeTypeError` {{experimental_inline}} - - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) + - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) - `DataCloneError` {{experimental_inline}} - - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) + - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) - `EncodingError` {{experimental_inline}} - : L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités). - `NotReadableError` {{experimental_inline}} @@ -95,7 +95,7 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `OperationError` {{experimental_inline}} - : L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités). - `NotAllowedError` {{experimental_inline}} - - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). + - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). ## Spécifications diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md index ac6b5e5805..a9155b492a 100644 --- a/files/fr/web/api/domhighrestimestamp/index.md +++ b/files/fr/web/api/domhighrestimestamp/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/DOMHighResTimeStamp --- {{APIRef("High Resolution Time")}} -Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. +Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. -L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. +L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde. ## Précision temporelle réduite -Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. -Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. +Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. +Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. ```js // précision temporelle réduite (2ms) dans Firefox 60 @@ -33,7 +33,7 @@ event.timeStamp; // ... ``` -Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. +Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. ## Propriétés @@ -41,19 +41,19 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la pré ### Valeur -La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. +La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. #### L'origine temporelle -L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : +L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : - Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit : - Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé. - Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable. - - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. + - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. -- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. +- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. - Dans tous les autres cas, l'origine temporelle est `undefined`. ## Méthodes diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md index 9c5aaa7d57..1e99f3a187 100644 --- a/files/fr/web/api/domimplementation/createdocumenttype/index.md +++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMImplementation/createDocumentType --- {{ ApiRef("DOM")}} -La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. +La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. ## Syntaxe @@ -40,7 +40,7 @@ var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'sv alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN ``` -## Spécifications +## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- | diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md index 05b850a02f..dffa2c45b9 100644 --- a/files/fr/web/api/domimplementation/createhtmldocument/index.md +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. +La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{do ### Paramètres -- *title* {{optional_inline}} (excepté dans IE) +- *title* {{optional_inline}} (excepté dans IE) - : C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML. ## Exemple diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md index 58d5e2eada..da4048b6d5 100644 --- a/files/fr/web/api/dommatrix/index.md +++ b/files/fr/web/api/dommatrix/index.md @@ -10,7 +10,7 @@ original_slug: Web/API/CSSMatrix --- {{APIRef("CSSOM")}}{{Non-standard_header}} -Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` +Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` ## Compatibilé des navigateurs @@ -20,6 +20,6 @@ Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est ## Voir aussi -- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) +- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) - [Safari Developer Library : Documentation sur WebKitCSSMatrix](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) -- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) +- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md index b1952e52f3..ab37e0cce5 100644 --- a/files/fr/web/api/domobject/index.md +++ b/files/fr/web/api/domobject/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/DOMObject --- {{APIRef("DOM")}}{{Obsolete_header}} -L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . +L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . ## Spécifications diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md index 95225b3515..3956bc37ea 100644 --- a/files/fr/web/api/dompoint/index.md +++ b/files/fr/web/api/dompoint/index.md @@ -44,7 +44,7 @@ _`DOMPoint` hérite des propriétés de son parent {{domxref("DOMPointReadOnly") ## Exemples -Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. +Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. ```js function setView() { diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md index 8685e88378..f0eb1a9a4b 100644 --- a/files/fr/web/api/dompointreadonly/index.md +++ b/files/fr/web/api/dompointreadonly/index.md @@ -16,14 +16,14 @@ L'interface **`DOMPointReadOnly`** spécifie les propriétés standard utilisée ## Constructeur - {{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}} - - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . + - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . ## Méthodes - {{domxref("DOMPointReadOnly.fromPoint")}} - : Traduit la position / perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.matrixTransform")}} - - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). + - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.toJSON()")}} - : Renvoie une représentation JSON de l'objet `DOMPointReadOnly`. diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md index 103be19e93..c5eb93d38f 100644 --- a/files/fr/web/api/domrect/index.md +++ b/files/fr/web/api/domrect/index.md @@ -39,9 +39,9 @@ _`DOMRect` hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}} - {{domxref("DOMRectReadOnly.top")}} - : Renvoie la valeur de la coordonnée supérieure de `DOMRect` (a la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative). - {{domxref("DOMRectReadOnly.right")}} - - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). + - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). - {{domxref("DOMRectReadOnly.bottom")}} - - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). + - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). - {{domxref("DOMRectReadOnly.left")}} - : Renvoie la valeur de la coordonnée de gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative). diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md index 2ea3072d6e..649ab42490 100644 --- a/files/fr/web/api/domstringlist/index.md +++ b/files/fr/web/api/domstringlist/index.md @@ -28,4 +28,4 @@ Un type renvoyé par certaines API contenant une liste de [DOMString](/fr/docs/W | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------- | -| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | +| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 7320b0432f..13d500a5e0 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} -La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. +La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. ## Syntaxe @@ -22,7 +22,7 @@ Vide. ## Exemples -Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. Tout d'abord, le code HTML : diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 784e530c17..0289af378e 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -17,7 +17,7 @@ Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. ## Exemples -Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. D'abord le HTML : diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 84e4fee3b2..ac02cc467c 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -34,7 +34,7 @@ La méthode **`forEach()`** de l'interface {{domxref("DOMTokenList")}} appelle l ## Exemple -Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. ### HTML diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8750f06b0b..b701e7a9f6 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -12,7 +12,7 @@ L'interface **`DOMTokenList`** représente un ensemble de marques (« <i la - {{domxref("DOMTokenList.length")}} {{ReadOnlyInline}} - : Un entier qui représente le nombre d'objets qui sont stockés dans l'objet. - {{domxref("DOMTokenList.value")}} {{ReadOnlyInline}} - - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ + - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ ## Méthodes diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md index 8fdc4d6e12..31de5d2d12 100644 --- a/files/fr/web/api/domtokenlist/supports/index.md +++ b/files/fr/web/api/domtokenlist/supports/index.md @@ -13,7 +13,7 @@ La méthode **`supports()`** de l'interface {{domxref("DOMTokenList")}} renvoie ## Syntaxe - var boolean = element.supports(token) + var boolean = element.supports(token) ### Paramètres diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index 3dd6bd44b9..9e09f19c88 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -5,16 +5,16 @@ tags: - API translation_of: Web/API/Element/animate --- -{{APIRef('Web Animations')}} {{SeeCompatTable}} +{{APIRef('Web Animations')}} {{SeeCompatTable}} -La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. +La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. -> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. +> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. ## Syntaxe ```js -element.animate(keyframes, options); +element.animate(keyframes, options); ``` ### Paramèters @@ -26,7 +26,7 @@ element.animate(keyframes, options); - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**: - `id {{optional_inline}}` - - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. + - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} @@ -36,20 +36,20 @@ Les options suivantes n'ont pas encore été implémentées, mais seront ajouté - `composite {{optional_inline}}` - - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. + - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. - - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. - - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. + - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. + - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. - `replace`, quand à elle, remplace la précédente valeur par la nouvelle. - `iterationComposite {{optional_inline}}` - - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. + - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. - `spacing {{optional_inline}}` - - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. + - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. - - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. - - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. + - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. + - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. ### Valeur de retour @@ -57,17 +57,17 @@ Retourne un objet de type {{domxref("Animation")}}. ## Exemple -Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. +Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. ```js document.getElementById("tunnel").animate([ - // keyframes - { transform: 'translateY(0px)' }, - { transform: 'translateY(-300px)' } + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } ], { - // timing options - duration: 1000, - iterations: Infinity + // timing options + duration: 1000, + iterations: Infinity }); ``` diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md index 8914f7d219..00b166916d 100644 --- a/files/fr/web/api/element/attachshadow/index.md +++ b/files/fr/web/api/element/attachshadow/index.md @@ -3,9 +3,9 @@ title: Element.attachShadow() slug: Web/API/Element/attachShadow translation_of: Web/API/Element/attachShadow --- -{{APIRef('Shadow DOM')}} {{SeeCompatTable}} +{{APIRef('Shadow DOM')}} {{SeeCompatTable}} -La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). +La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). ## Syntaxe @@ -15,15 +15,15 @@ La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un él - `shadowRootInit` - - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : + - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : - `mode` : une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes : - `open` : spécifie une encapsulation ouverte. - - `closed` : spécifie une encapsulation fermée. + - `closed` : spécifie une encapsulation fermée. ### Retour -Retourne un {{domxref("ShadowRoot")}}. +Retourne un {{domxref("ShadowRoot")}}. ## Spécifications diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md index bca756ce34..c1142654af 100644 --- a/files/fr/web/api/element/attributes/index.md +++ b/files/fr/web/api/element/attributes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/attributes --- {{ APIRef("DOM") }} -La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. +La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. ## Syntaxe diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md index 93395d4adc..b8330cf369 100644 --- a/files/fr/web/api/element/childelementcount/index.md +++ b/files/fr/web/api/element/childelementcount/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/ParentNode/childElementCount La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné. > **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}. -> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. +> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. ## Syntaxe diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md index 0674c2aa52..33dc2a5aab 100644 --- a/files/fr/web/api/element/classlist/index.md +++ b/files/fr/web/api/element/classlist/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/classList --- {{APIRef("DOM")}} -La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. +La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces. @@ -26,12 +26,12 @@ _elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représent - add( String \[, String] ) - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée. -- remove( String \[, String] ) +- remove( String \[, String] ) - : Supprime les classes spécifiées. **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs. - **item**( Number ) - : Renvoie la position d'une classe dans une collection. -- **toggle**( String \[, force] ) +- **toggle**( String \[, force] ) - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`. Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime. - contains( String ) @@ -86,7 +86,7 @@ La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité ```js // 1. String.prototype.trim polyfill -if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md index fc6162de3e..1304f960e3 100644 --- a/files/fr/web/api/element/classname/index.md +++ b/files/fr/web/api/element/classname/index.md @@ -34,9 +34,9 @@ if(elm.className === 'active'){ ## Notes -Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. +Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. -`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. +`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. ```js elm.setAttribute('class', elm.getAttribute('class')) diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index a805089953..8ccb34f33d 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -86,7 +86,7 @@ if (!Element.prototype.closest) }; ``` -Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : +Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : ```js if (window.Element && !Element.prototype.closest) { diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md index 3032e6c928..77974b2ec2 100644 --- a/files/fr/web/api/element/compositionend_event/index.md +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -50,7 +50,7 @@ Par exemple, cette événement pourrait être déclanché quand un utilisateur s body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index 55971fdc43..c9c4b8f3cc 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -62,7 +62,7 @@ inputElement.addEventListener('compositionstart', (event) => { body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index 1f0a577102..f884e24cd0 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -17,7 +17,7 @@ L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas - Spécification - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) - Interface - - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. + - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. - Propagation - : Non - Annulable @@ -49,6 +49,6 @@ Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. - {{domxref("GlobalEventHandlers.onerror")}} - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} - {{domxref("HTMLMediaElement.onerror")}} - - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . + - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . - {{domxref("MediaRecorder.onerror")}} - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md index fdd728353b..ab944ed9ed 100644 --- a/files/fr/web/api/element/getattribute/index.md +++ b/files/fr/web/api/element/getattribute/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/getAttribute --- {{APIRef("DOM")}} -`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. +`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md index f805ace861..d0dea38583 100644 --- a/files/fr/web/api/element/getattributenode/index.md +++ b/files/fr/web/api/element/getattributenode/index.md @@ -44,5 +44,5 @@ Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisa ## Spécification -- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) +- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md index 39c6079fbe..7a9efeb1ad 100644 --- a/files/fr/web/api/element/getattributens/index.md +++ b/files/fr/web/api/element/getattributens/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/getAttributeNS --- {{APIRef("DOM")}} -**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. +**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe @@ -25,7 +25,7 @@ translation_of: Web/API/Element/getAttributeNS ### Valeur de retour -La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. +La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. > **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants. @@ -76,7 +76,7 @@ Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` . -La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. +La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié. @@ -86,8 +86,8 @@ Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer un | Spécification | État | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | +| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | | {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 06630172c1..d365d82632 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -88,7 +88,7 @@ Remarquez aussi que les valeurs de `x`/`left`, L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [`ClientRect`](https://docs.microsoft.com/fr-fr/previous-versions/hh826029(v=vs.85)) qu'ils retournent empêche d'ajouter le support de `x` et `y`. -En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. +En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées. diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md index 1f729a405b..be9a8a9bb6 100644 --- a/files/fr/web/api/element/getelementsbyclassname/index.md +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -12,39 +12,39 @@ translation_of: Web/API/Element/getElementsByClassName --- {{APIRef("DOM")}} -La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. +La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. -À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. +À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. ## Syntaxe var elements = element.getElementsByClassName(names); -- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. -- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. -- *element* est n'importe quel {{domxref("Element")}} du document. +- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. +- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. +- *element* est n'importe quel {{domxref("Element")}} du document. ## Exemples -Obtient tous les élements ayant une classe `test`: +Obtient tous les élements ayant une classe `test`: ```js element.getElementsByClassName('test'); ``` -Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: +Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: ```js element.getElementsByClassName('red test'); ``` -Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: +Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: ```js document.getElementById('main').getElementsByClassName('test'); ``` -On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: +On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: ```js var testElements = document.getElementsByClassName('test'); diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 8fe3f15e3b..45395751aa 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -26,7 +26,7 @@ Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un ### Valeur -Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions @@ -71,7 +71,7 @@ document.documentElement.innerHTML = "<pre>" + #### Détails opérationnels -Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : +Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : 1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments. 2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `<template>` est remplacé par le nouveau `DocumentFragment` créé à l'étape 1. diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md index f13f332b60..81ba5d9deb 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.md +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -21,7 +21,7 @@ La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une - position - - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : + - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : - `'beforebegin'` : Avant `targetElement` lui-même. - `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant. @@ -76,7 +76,7 @@ afterBtn.addEventListener('click', function() { }); ``` -Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. +Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. ## Spécification diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md index fa6a26e810..b123e61350 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.md +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/insertAdjacentHTML --- {{APIRef("DOM")}} -`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. +`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. ## Syntaxe @@ -21,11 +21,11 @@ element.insertAdjacentHTML(position, text); ### Paramètres - `position` - - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : + - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : <!----> -- `'beforebegin'` : Avant l'`element` lui-même. +- `'beforebegin'` : Avant l'`element` lui-même. - `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant. - `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant. - `'afterend'` : Après `element` lui-même. @@ -33,7 +33,7 @@ element.insertAdjacentHTML(position, text); <!----> - `text` - - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. + - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. ### Visualisation des noms de position @@ -45,7 +45,7 @@ element.insertAdjacentHTML(position, text); </p> <!-- afterend --> -> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. ## Exemple diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md index 2ecca80491..0ceb55ad45 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.md +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -74,13 +74,13 @@ Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans I if (!Element.prototype.insertAdjacentText) Element.prototype.insertAdjacentText = function(type, txt){ - this.insertAdjacentHTML( + this.insertAdjacentHTML( type, (txt+'') // convertir en chaîne de caractères - .replace(/&/g, '&') // intégrer des symboles d'esperluette - .replace(/</g, '<') // intégrer les symboles "plus petit que" - ) - } + .replace(/&/g, '&') // intégrer des symboles d'esperluette + .replace(/</g, '<') // intégrer les symboles "plus petit que" + ) + } ## Spécification diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md index 2a57085dbf..13f9020898 100644 --- a/files/fr/web/api/element/outerhtml/index.md +++ b/files/fr/web/api/element/outerhtml/index.md @@ -24,14 +24,14 @@ element.outerHTML = htmlString; ### Valeur -La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions - `SyntaxError` - : Une tentative a été faite de définir la valeur de `outerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. - `NoModificationAllowedError` - - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. + - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. ## Exemples diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md index 3f362cfe95..5a10ca8817 100644 --- a/files/fr/web/api/element/removeattributenode/index.md +++ b/files/fr/web/api/element/removeattributenode/index.md @@ -33,10 +33,10 @@ d.removeAttributeNode(d_align); Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original. -Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. +Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. {{ DOMAttributeMethods() }} ## Spécification -- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) +- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md index 58ce20f5c2..eb5a5ab3af 100644 --- a/files/fr/web/api/element/removeattributens/index.md +++ b/files/fr/web/api/element/removeattributens/index.md @@ -27,7 +27,7 @@ Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à // special:specialAlign="utterleft" width="200px" /> d = document.getElementById("div1"); d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); - // l'élément est devenu : <div id="div1" width="200px" /> + // l'élément est devenu : <div id="div1" width="200px" /> ## Notes diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md index 5cf2f6c4ef..5463e81dab 100644 --- a/files/fr/web/api/element/requestfullscreen/index.md +++ b/files/fr/web/api/element/requestfullscreen/index.md @@ -8,13 +8,13 @@ translation_of: Web/API/Element/requestFullScreen --- {{APIRef("Fullscreen API")}} -La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. +La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. -Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. +Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera. -> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas. +> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas. ## Syntaxe @@ -22,7 +22,7 @@ Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un cha ## Exemple -Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). +Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). tbd diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index 84bb1b7101..4b5ce90b35 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -127,23 +127,23 @@ Associée à l'événement [element.onscroll](/fr/docs/DOM/element.onscroll), l' <title>MDN Example</title> <script type="text/javascript"> function checkReading () { - if (checkReading.read) { return; } - checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; - document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; - checkReading.noticeBox.innerHTML = checkReading.read ? - "Merci." : - "Veuillez faire défiler la page et lire le texte qui suit."; + if (checkReading.read) { return; } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? + "Merci." : + "Veuillez faire défiler la page et lire le texte qui suit."; } onload = function () { - var oToBeRead = document.getElementById("rules"); - checkReading.noticeBox = document.createElement("span"); - document.registration.accept.checked = false; - checkReading.noticeBox.id = "notice"; - oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); - oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); - oToBeRead.onscroll = checkReading; - checkReading.call(oToBeRead); + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); } ``` diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md index f36004773c..e8256d835b 100644 --- a/files/fr/web/api/element/scrollintoview/index.md +++ b/files/fr/web/api/element/scrollintoview/index.md @@ -32,7 +32,7 @@ La méthode **`Element.scrollIntoView()`** fait défiler la page de manière à - `behavior` {{optional_inline}} - : Définit l'animation de transition qui peut être `"auto"`, `"instant"` ou `"smooth"`. Par défaut : `"auto"`. - `block` {{optional_inline}} - - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. + - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. - `inline` {{optional_inline}} - : L'une des options `"start"`, `"center"`, `"end"` ou `"nearest"`. Par défaut : `"nearest"`. diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md index 115f89a128..3fafc4443a 100644 --- a/files/fr/web/api/element/scrollleft/index.md +++ b/files/fr/web/api/element/scrollleft/index.md @@ -22,7 +22,7 @@ _sLeft_ est un entier représentant le nombre de pixels dont _element_ a été d // Définit le nombre de pixels défilés element.scrollLeft = 10; -**scrollLeft** peut être n'importe quelle valeur entière, cependant : +**scrollLeft** peut être n'importe quelle valeur entière, cependant : - Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), `scrollLeft` est mis à 0. - S'il reçoit une valeur inférieure à 0, `scrollLeft` est mis à 0. diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md index fa23a3f747..147f9a341b 100644 --- a/files/fr/web/api/element/scrollleftmax/index.md +++ b/files/fr/web/api/element/scrollleftmax/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Element/scrollLeftMax --- {{APIRef("DOM")}}{{Non-standard_header}} -La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. +La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. ## Syntaxe diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md index 9e21bb6a0f..ecb4c81e21 100644 --- a/files/fr/web/api/element/scrollto/index.md +++ b/files/fr/web/api/element/scrollto/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/scrollTo --- {{ APIRef }} -La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. +La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. ## Syntaxe @@ -23,9 +23,9 @@ La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de fa - `x-coord` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche. - `y-coord` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche. -\- ou - +\- ou - -- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. +- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. ## Exemples @@ -35,7 +35,7 @@ En utilisant des coordonnées : element.scrollTo(0, 1000); ``` -Ou en utilisant `options` : +Ou en utilisant `options` : ```js element.scrollTo({ diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md index f14babcee9..4e9dd42383 100644 --- a/files/fr/web/api/element/scrollwidth/index.md +++ b/files/fr/web/api/element/scrollwidth/index.md @@ -30,7 +30,7 @@ _xScrollWidth_ est la largeur du contenu d'_element_ en pixels. Il n'y a pas de spécification du W3C pour **scrollWidth**. -Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) +Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) ### Références diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md index 064db39bed..eb359f0d7e 100644 --- a/files/fr/web/api/element/select_event/index.md +++ b/files/fr/web/api/element/select_event/index.md @@ -36,9 +36,9 @@ L'évènement `select` est déclenché quand du texte est sélectionné. L'évè ```html <input id="test" type="text" value="Sélectionnez-moi !" /> <script> - var elem = document.getElementById('test'); - elem.addEventListener('select', function() { - alert('La sélection a changé !'); - }, false); + var elem = document.getElementById('test'); + elem.addEventListener('select', function() { + alert('La sélection a changé !'); + }, false); </script> ``` diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index f86cbf065c..a34e4af814 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -63,7 +63,7 @@ Ceci démontre 2 choses : ## Spécifications -- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) +- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) - [HTML5 : API dans les documents HTML](http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md index 2b78429f15..95583dd69d 100644 --- a/files/fr/web/api/element/setattributenode/index.md +++ b/files/fr/web/api/element/setattributenode/index.md @@ -37,10 +37,10 @@ var replacedAttr = element.setAttributeNode(attribute); Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé. -Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. +Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. {{DOMAttributeMethods()}} ## Spécification -- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) +- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md index a93dd4f72e..6bb2a14bee 100644 --- a/files/fr/web/api/element/setattributenodens/index.md +++ b/files/fr/web/api/element/setattributenodens/index.md @@ -32,7 +32,7 @@ translation_of: Web/API/Element/setAttributeNodeNS var a = d1.getAttributeNodeNS(myns, "special-align"); d2.setAttributeNodeNS(a); - alert(d2.attributes[1].value) // renvoie : "utterleft" + alert(d2.attributes[1].value) // renvoie : "utterleft" ## Notes diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md index 26312d6014..80841d9c87 100644 --- a/files/fr/web/api/element/setattributens/index.md +++ b/files/fr/web/api/element/setattributens/index.md @@ -34,7 +34,7 @@ value) {{ DOMAttributeMethods() }} -`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. +`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. ## Spécification diff --git a/files/fr/web/api/encoding_api/index.md b/files/fr/web/api/encoding_api/index.md index 2e5901f1e7..92f5385c84 100644 --- a/files/fr/web/api/encoding_api/index.md +++ b/files/fr/web/api/encoding_api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Encoding_API L'`API Encoding` fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}. -L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. +L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. ## Interfaces diff --git a/files/fr/web/api/errorevent/index.md b/files/fr/web/api/errorevent/index.md index e0da9edb4a..f7db62cac5 100644 --- a/files/fr/web/api/errorevent/index.md +++ b/files/fr/web/api/errorevent/index.md @@ -9,27 +9,27 @@ translation_of: Web/API/ErrorEvent --- {{APIRef("HTML DOM")}} -L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. +L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. ## Propriétés _Hérite également des propriétés de son parent {{domxref("Event")}}_. - {{domxref("ErrorEvent.message")}} {{readonlyInline}} - - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. + - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. - {{domxref("ErrorEvent.filename")}} {{readonlyInline}} - : Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.lineno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.colno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}} - - : Un `Object` JavaScript qui est concerné par l'événement. + - : Un `Object` JavaScript qui est concerné par l'événement. ## Constructeur - {{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}} - - : Crée un événement `ErrorEvent` avec les paramètres fournis. + - : Crée un événement `ErrorEvent` avec les paramètres fournis. ## Méthodes @@ -39,7 +39,7 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | +| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | | {{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML5 W3C') }} | Définition initiale. | ## Compatibilité des navigateurs @@ -48,4 +48,4 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. ## Voir aussi -- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. +- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md index 2c869ea435..de6a8013bc 100644 --- a/files/fr/web/api/event/bubbles/index.md +++ b/files/fr/web/api/event/bubbles/index.md @@ -37,14 +37,14 @@ function goInput(e) { } ``` -> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. +> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md index a570c95c8c..a7df8f75a2 100644 --- a/files/fr/web/api/event/cancelable/index.md +++ b/files/fr/web/api/event/cancelable/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/cancelable --- {{ ApiRef("DOM") }} -La propriété _`cancelable`_ (_annulable_) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. +La propriété _`cancelable`_ (_annulable_) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec `cancelable` avant d'appeler leurs méthodes `preventDefault()`. @@ -55,8 +55,8 @@ Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefaul | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md index c6cb47bf5d..9549d8b06f 100644 --- a/files/fr/web/api/event/cancelbubble/index.md +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -30,7 +30,7 @@ La propriété **`Event.cancelBubble`** est un alias historique de {{domxref("Ev | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md index efba95d88c..0d640f3db7 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.md +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -81,7 +81,7 @@ Il y a 5 cibles à considérer : </td> <td> {{ Non-standard_inline() }} Si l'évènement a été reciblé pour - quelque raison autre que un passage de limite anonyme, il sera défini + quelque raison autre que un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, @@ -119,65 +119,65 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <title>Comparison of Event Targets</title> - <style> - table { - border-collapse: collapse; - height: 150px; - width: 100%; - } - td { - border: 1px solid #ccc; - font-weight: bold; - padding: 5px; - min-height: 30px; - } - .standard { - background-color: #99ff99; - } - .non-standard { - background-color: #902D37; - } - </style> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> </head> <body> - <table> - <thead> - <tr> - <td class="standard">Original target dispatching the event <small>event.target</small></td> - <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> - <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> - </tr> - </thead> - <tr> - <td id="target"></td> - <td id="currentTarget"></td> - <td id="relatedTarget"></td> - <td id="explicitOriginalTarget"></td> - <td id="originalTarget"></td> - </tr> + <table> + <thead> + <tr> + <td class="standard">Original target dispatching the event <small>event.target</small></td> + <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> + <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> </table> <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> <script> - function handleClicks(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('currentTarget').innerHTML = e.currentTarget; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; - document.getElementById('originalTarget').innerHTML = e.originalTarget; - } - - function handleMouseover(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - } - - document.addEventListener('click', handleClicks, false); - document.addEventListener('mouseover', handleMouseover, false); + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + + + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); </script> </body> </html> @@ -185,7 +185,7 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm ### Utilisation de `target` et `relatedTarget` -La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. +La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. | Type d'évènement | [event.target](/en/DOM/event.target) | [event.relatedTarget](/en/DOM/event.relatedTarget) | | ---------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md index 4ff41dfd07..db515795b4 100644 --- a/files/fr/web/api/event/defaultprevented/index.md +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -30,7 +30,7 @@ Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index 0fa5698321..954d1aa472 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -65,7 +65,7 @@ Ces valeurs décrivent quelle est la phase du flux d'événements actuellement <td> L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. - Les écouteurs d'événements enregistrés pour cette phase sont appelés à + Les écouteurs d'événements enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète. @@ -96,22 +96,22 @@ Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](htt ```html <h4>Event Propagation Chain</h4> <ul> - <li>Click 'd1'</li> - <li>Analyse event propagation chain</li> - <li>Click next div and repeat the experience</li> - <li>Change Capturing mode</li> - <li>Repeat the experience</li> + <li>Click 'd1'</li> + <li>Analyse event propagation chain</li> + <li>Click next div and repeat the experience</li> + <li>Change Capturing mode</li> + <li>Repeat the experience</li> </ul> <input type="checkbox" id="chCapture" /> <label for="chCapture">Use Capturing</label> - <div id="d1">d1 - <div id="d2">d2 - <div id="d3">d3 - <div id="d4">d4</div> - </div> - </div> - </div> - <div id="divInfo"></div> + <div id="d1">d1 + <div id="d2">d2 + <div id="d3">d3 + <div id="d4">d4</div> + </div> + </div> + </div> + <div id="divInfo"></div> ``` ### CSS @@ -195,8 +195,8 @@ function Clear() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md index cc0bf70366..133918065b 100644 --- a/files/fr/web/api/event/explicitoriginaltarget/index.md +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -16,7 +16,7 @@ Cette propriété représente la cible originale de l'évènement. Elle est spé Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas [`currentTarget`](/fr/docs/Web/API/Event/currentTarget) pointera vers le parent et `explicitOriginalTarget` vers le nœud texte. -À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. +À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. Voir aussi une [comparaison des cibles pour les évènements](/fr/docs/DOM/event/Comparison_of_Event_Targets). diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md index fceca59b46..4a83f40593 100644 --- a/files/fr/web/api/event/initevent/index.md +++ b/files/fr/web/api/event/initevent/index.md @@ -24,11 +24,11 @@ Les évènements initialisés par ce moyen ont été créés par la méthode {{d event.initEvent(type, bubbles, cancelable) - `type` - - : est une {{domxref("DOMString")}} qui définit le type d'évènement. + - : est une {{domxref("DOMString")}} qui définit le type d'évènement. - `bubbles` - - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. + - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. - `cancelable` - - : Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur. + - : Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur. ## Exemple diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md index cdb9b49165..42c0ee0970 100644 --- a/files/fr/web/api/event/istrusted/index.md +++ b/files/fr/web/api/event/istrusted/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/isTrusted --- {{APIRef("DOM")}} -La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent. +La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent. ## Syntaxe @@ -39,7 +39,7 @@ La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, {{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}} </td> <td>{{ Spec2('DOM WHATWG') }}</td> - <td> </td> + <td></td> </tr> <tr> <td> diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md index 39e7d7b781..adc3636f58 100644 --- a/files/fr/web/api/event/originaltarget/index.md +++ b/files/fr/web/api/event/originaltarget/index.md @@ -16,7 +16,7 @@ La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozill En présence de contenu anonyme [XBL](/fr/docs/XBL), ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir [Anonymous Content#Event_Flow_and_Targeting](/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting) pour plus de détails. -**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. +**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. Voir aussi [Comparaison des cibles d'évènements.](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements) diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md index 8bd412ca1b..d03babf373 100644 --- a/files/fr/web/api/event/stopimmediatepropagation/index.md +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -22,7 +22,7 @@ Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md index 193691c866..d24ea0cc25 100644 --- a/files/fr/web/api/event/stoppropagation/index.md +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -23,7 +23,7 @@ Voir la section Exemple 5 : [Propagation d'évènements](/fr/docs/Web/API/Docume ## Notes -Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). +Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). [preventDefault](/fr/docs/Web/API/Event/preventDefault) est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement. @@ -31,8 +31,8 @@ Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}} | {{Spec2("DOM2 Events")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md index 3e60e62d4a..57dea7f290 100644 --- a/files/fr/web/api/event/target/index.md +++ b/files/fr/web/api/event/target/index.md @@ -46,8 +46,8 @@ ul.addEventListener('click', hide, false); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} | {{Spec2("DOM2 Events")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -56,7 +56,7 @@ ul.addEventListener('click', hide, false); ## Notes concernant la compatibilité -Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. +Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. ```js function hide(e) { diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index fde4ad5b7d..36923099fa 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -73,8 +73,8 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la préc | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 4774093a5b..f61f4cba04 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/type --- {{APIRef}} -La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. +La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. L'argument `event` de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse. @@ -76,7 +76,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | | {{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md index 3846e79506..2497126c39 100644 --- a/files/fr/web/api/eventsource/close/index.md +++ b/files/fr/web/api/eventsource/close/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/EventSource/close --- {{APIRef('WebSockets API')}} -La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). +La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). > **Note :** Si la connexion est déjà fermé, la fonction n'agit pas. @@ -37,12 +37,12 @@ var bouton = document.querySelector('button'); var evtSource = new EventSource('sse.php'); bouton.onclick = function() { - console.log('Connection fermée'); - evtSource.close(); + console.log('Connection fermée'); + evtSource.close(); } ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventsource/open_event/index.md b/files/fr/web/api/eventsource/open_event/index.md index 44b9be5821..2a5513cd31 100644 --- a/files/fr/web/api/eventsource/open_event/index.md +++ b/files/fr/web/api/eventsource/open_event/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/EventSource/onopen --- {{APIRef('Server Sent Events')}} -La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. +La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. ## Syntaxe @@ -22,11 +22,11 @@ La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un { ```js evtSource.onopen = function() { - console.log("Connexion au serveur établie."); + console.log("Connexion au serveur établie."); }; ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index db55b600bd..df37cc7b12 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -16,7 +16,7 @@ Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} ```js target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); -target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement +target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement ``` ### Paramètres @@ -385,7 +385,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp ### Pourquoi utiliser addEventListener() ? -`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : +`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : - Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions. - Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation) @@ -757,7 +757,7 @@ for (let i=0, j=0 ; i<els.length ; i++) { // Cas 4 for (let i=0, j=0 ; i<els.length ; i++) { - /* faire des tas de choses avec j */ + /* faire des tas de choses avec j */ function processEvent(e) {/*faire quelque chose*/}; els[j].addEventListener("click", processEvent, false); } diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.md b/files/fr/web/api/eventtarget/dispatchevent/index.md index 854d476721..d6de9e575a 100644 --- a/files/fr/web/api/eventtarget/dispatchevent/index.md +++ b/files/fr/web/api/eventtarget/dispatchevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/EventTarget/dispatchEvent --- {{APIRef("DOM Events")}} -Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec `dispatchEvent()`. +Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec `dispatchEvent()`. ## Syntaxe @@ -24,7 +24,7 @@ Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} ### Valeur retournée -- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). +- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). La méthode `dispatchEvent` lance une exception `UNSPECIFIED_EVENT_TYPE_ERR` si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est `null` ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant. diff --git a/files/fr/web/api/eventtarget/eventtarget/index.md b/files/fr/web/api/eventtarget/eventtarget/index.md index dee098e931..516ec923fa 100644 --- a/files/fr/web/api/eventtarget/eventtarget/index.md +++ b/files/fr/web/api/eventtarget/eventtarget/index.md @@ -30,7 +30,7 @@ Une instance d'objet {{domxref("EventTarget")}}. ```js class MyEventTarget extends EventTarget { constructor(mySecret) { - super(); + super(); this._secret = mySecret; } @@ -52,7 +52,7 @@ let newValue = myEventTarget.secret; // == 7 | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.md b/files/fr/web/api/eventtarget/removeeventlistener/index.md index 91761ef749..f601827c5b 100644 --- a/files/fr/web/api/eventtarget/removeeventlistener/index.md +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.md @@ -24,9 +24,9 @@ La méthode **`EventTarget.removeEventListener()`** supprime d'une {{domxref("Ev ### Paramètres - `type` - - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. + - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. - `listener` - - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. + - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. - `options` {{optional_inline}} - : Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : diff --git a/files/fr/web/api/extendableevent/extendableevent/index.md b/files/fr/web/api/extendableevent/extendableevent/index.md index cc87f30a32..33e1b13345 100644 --- a/files/fr/web/api/extendableevent/extendableevent/index.md +++ b/files/fr/web/api/extendableevent/extendableevent/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/ExtendableEvent/ExtendableEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. +Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. ## Syntaxe @@ -23,7 +23,7 @@ var myExtendableEvent = new ExtendableEvent(type, init); ### Paramètres - _type_ - - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. + - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. - _init_ {{optional_inline}} - : Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés. @@ -41,6 +41,6 @@ var myExtendableEvent = new ExtendableEvent(type, init); - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/extendablemessageevent/data/index.md b/files/fr/web/api/extendablemessageevent/data/index.md index ca1b492b22..d4f8dccd40 100644 --- a/files/fr/web/api/extendablemessageevent/data/index.md +++ b/files/fr/web/api/extendablemessageevent/data/index.md @@ -23,7 +23,7 @@ N'importe quel type de donnée. ## Exemples -Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. +Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md index 10ca279abb..ebfa830398 100644 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. +Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. ## Syntaxe @@ -25,11 +25,11 @@ Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'u - : Un objet d'initialisation, qui doit contenir les paramètres suivant: - - `data`: Les données de l'évènement — peut être de n'importe quel type. + - `data`: Les données de l'évènement — peut être de n'importe quel type. - `origin`: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant. - `lastEventId`: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source. - - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. - - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. + - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. + - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. ## Exemples @@ -55,7 +55,7 @@ var myEME = new ExtendableMessageEvent('message', init); ## Voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/index.md index 5cdfead701..1e0bf78fc3 100644 --- a/files/fr/web/api/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. +L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}. ## Constructeur - {{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}} - - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. + - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. ## Propriétés @@ -30,19 +30,19 @@ _Hérite des propriétés de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}} - : Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message. - {{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}} - - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. + - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. - {{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}} - : Retourne une référence vers le service worker qui envoie le message. - {{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}} - - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. + - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. ## Méthodes -_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. +_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. ## Exemples -Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. +Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.md b/files/fr/web/api/extendablemessageevent/lasteventid/index.md index cd1fc93d7f..ca6cee649d 100644 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.md +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/lastEventId --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. +La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/origin/index.md b/files/fr/web/api/extendablemessageevent/origin/index.md index 6179c94fa4..f10a85f86b 100644 --- a/files/fr/web/api/extendablemessageevent/origin/index.md +++ b/files/fr/web/api/extendablemessageevent/origin/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. +La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/ports/index.md b/files/fr/web/api/extendablemessageevent/ports/index.md index 994d3daaeb..904c036207 100644 --- a/files/fr/web/api/extendablemessageevent/ports/index.md +++ b/files/fr/web/api/extendablemessageevent/ports/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **ports** de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé). +La propriété en lecture seule **ports** de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé). ## Syntaxe @@ -21,11 +21,11 @@ La propriété en lecture seule **ports** de l'interface {{domxref("Extendable ### Value -Un tableau de {{domxref("MessagePort")}}. +Un tableau de {{domxref("MessagePort")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -58,6 +58,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.md b/files/fr/web/api/featurepolicy/allowedfeatures/index.md index 97a6ea6866..26371b8120 100644 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.md +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures --- {{APIRef("Feature Policy API")}}{{SeeCompatTable}} -La méthode **`allowedFeatures()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. +La méthode **`allowedFeatures()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. ## Syntaxe @@ -37,7 +37,7 @@ const featurePolicy = document.featurePolicy const permissions = featurePolicy.allowedFeatures() for (const directive of permissions) - console.log(directive) + console.log(directive) ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.md b/files/fr/web/api/featurepolicy/allowsfeature/index.md index 20c6aec1a6..74dc998ede 100644 --- a/files/fr/web/api/featurepolicy/allowsfeature/index.md +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.md @@ -26,7 +26,7 @@ ou Le nom de la directive associée à une fonctionnalité. -#### `Origine` {{Optional_inline}} +#### `Origine` {{Optional_inline}} Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée. @@ -36,7 +36,7 @@ Un {{JSxRef("Boolean")}} valant `true` si et seulement si la fonctionnalité est ## Exemple -Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. +Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. ```js // D'abord, récupère le Feature Policy @@ -46,10 +46,10 @@ const featurePolicy = document.featurePolicy const estPermise = featurePolicy.allowsFeature("camera") if (estPermise) - console.log("FP autorise l'appareil photo.") + console.log("FP autorise l'appareil photo.") else - console.log("FP n'autorise pas l'appareil photo.") + console.log("FP n'autorise pas l'appareil photo.") ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/features/index.md b/files/fr/web/api/featurepolicy/features/index.md index 19302a0345..7965533f4d 100644 --- a/files/fr/web/api/featurepolicy/features/index.md +++ b/files/fr/web/api/featurepolicy/features/index.md @@ -37,7 +37,7 @@ const fonctionnalitésSupportées = featurePolicy.features() // Affiche chaque directive dans la console for (const directive of fonctionnalitésSupportées) - console.log(directive) + console.log(directive) ``` ## Spécification diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md index cf155f8a07..ba5e463e28 100644 --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md @@ -32,7 +32,7 @@ La fonction jettera un avertissement si la directive de Feature Policy demandée ## Exemple -Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. +Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. ```js // D'abord, récupère l'objet Feature Policy @@ -42,7 +42,7 @@ const featurePolicy = document.featurePolicy const listePermissions = featurePolicy.getAllowlistForFeature("camera") for (const origine of listePermissions) - console.log(origine) + console.log(origine) ``` ## Spécification diff --git a/files/fr/web/api/federatedcredential/index.md b/files/fr/web/api/federatedcredential/index.md index 58a720bd98..37c3aadf39 100644 --- a/files/fr/web/api/federatedcredential/index.md +++ b/files/fr/web/api/federatedcredential/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FederatedCredential --- {{SeeCompatTable}}{{APIRef("Credential Management API")}} -L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. +L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété `credential` de l'objet `init` pour la méthode globale {{domxref('fetch')}}. @@ -23,7 +23,7 @@ Pour les navigateurs qui le prennent en charge, une instance de cette interface _Hérite des propriétés de l'interface parente : {{domxref("Credential")}}._ -- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} +- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} - : Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré. ### Gestionnaires d'évènements diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md index a6820a8437..e3ebd3c500 100644 --- a/files/fr/web/api/fetch/index.md +++ b/files/fr/web/api/fetch/index.md @@ -16,9 +16,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- {{APIRef("Fetch")}} -La méthode **`fetch()`** du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire `then` pour identifier les erreurs HTTP. +La méthode **`fetch()`** du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire `then` pour identifier les erreurs HTTP. -`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. +`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (`404`, etc.) Pour cela, un gestionnaire `then()` doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur `true` et/ou la valeur de la propriété {{domxref("Response.status")}}. @@ -58,7 +58,7 @@ La méthode `fetch()` est contrôlée par la directive `connect-src` de l'entêt - `redirect` - : Le mode de redirection à adopter pour cette requête : `follow` (suivre les redirections automatiquement), `error` (abandonner avec une erreur si une redirection a lieu), ou `manual` (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était `follow` avant Chrome 47, mais à partir de cette version, c'est `manual`. - `referrer` - - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. + - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. - `referrerPolicy` - : Spécifie la valeur de l'entête HTTP referer. Cela peut être `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin` ou `unsafe-url`. - `integrity` diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.md b/files/fr/web/api/fetch_api/basic_concepts/index.md index 83cc79609d..120995ff3a 100644 --- a/files/fr/web/api/fetch_api/basic_concepts/index.md +++ b/files/fr/web/api/fetch_api/basic_concepts/index.md @@ -61,7 +61,7 @@ When a new {{domxref("Headers")}} object is created using the {{domxref("Headers </tbody> </table> -A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if +A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if - guard is `request` and the header _name_ isn't a {{Glossary("forbidden header name")}} . - guard is `request-no-cors` and the header _name_/_value_ is a {{Glossary("simple header")}} . diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md index 7a6a5d82d2..0d46a66799 100644 --- a/files/fr/web/api/fetch_api/index.md +++ b/files/fr/web/api/fetch_api/index.md @@ -13,7 +13,7 @@ Fetch fournit une définition générique des objets {{domxref("Request")}} et { Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP _origin_, supplantant les définitions précédemment proposées ailleurs. -Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources. +Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources. La méthode `fetch()` prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options `init` comme second argument (voir {{domxref("Request")}}.) @@ -21,16 +21,16 @@ Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble d Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des _service workers_). -> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). +> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). ### Interrompre un fetch -Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. +Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. ## Les interfaces de Fetch - {{domxref("GlobalFetch")}} - - : La méthode `fetch()` est utilisée pour récuperer une ressource. + - : La méthode `fetch()` est utilisée pour récuperer une ressource. - {{domxref("Headers")}} - : Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat. - {{domxref("Request")}} @@ -41,7 +41,7 @@ Les navigateurs ont commencé à ajouter le support expérimental des interfaces ## Mixin de Fetch - {{domxref("Body")}} - - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. + - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. ## Spécifications diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md index 919d9496d2..922a290288 100644 --- a/files/fr/web/api/fetch_api/using_fetch/index.md +++ b/files/fr/web/api/fetch_api/using_fetch/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch L'[API Fetch](/fr/docs/Web/API/Fetch_API) fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone. -Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP. +Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP. ## L'état actuel du support par les navigateurs @@ -48,7 +48,7 @@ const myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { - return response.blob(); + return response.blob(); }) .then(function(myBlob) { const objectURL = URL.createObjectURL(myBlob); @@ -56,7 +56,7 @@ fetch('flowers.jpg') }); ``` -Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). +Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}). @@ -68,7 +68,7 @@ Les requêtes Fetch sont controllées par la directive `connect-src` du [Content ### Fournir des options à la requête -La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : +La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : ```js var myHeaders = new Headers(); @@ -198,7 +198,7 @@ Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu r ```js fetch(myRequest).then(function(response) { - var contentType = response.headers.get("content-type"); + var contentType = response.headers.get("content-type"); if(contentType && contentType.indexOf("application/json") !== -1) { return response.json().then(function(json) { // traitement du JSON @@ -280,7 +280,7 @@ fetch("/login", { }) ``` -Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. +Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. ## Spécifications diff --git a/files/fr/web/api/fetchevent/index.md b/files/fr/web/api/fetchevent/index.md index 14746adbfe..f87acd105b 100644 --- a/files/fr/web/api/fetchevent/index.md +++ b/files/fr/web/api/fetchevent/index.md @@ -5,43 +5,43 @@ translation_of: Web/API/FetchEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. +Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. ## Constructeur - {{domxref("FetchEvent.FetchEvent()")}} - - : Crée un nouvel objet `FetchEvent`. + - : Crée un nouvel objet `FetchEvent`. ## Propriétés _Hérite de son ancêtre, {{domxref("Event")}}_. -- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} - - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. -- {{domxref("FetchEvent.request")}} {{readonlyInline}} - - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. -- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} - - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} + - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. +- {{domxref("FetchEvent.request")}} {{readonlyInline}} + - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. +- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} + - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. ### Propriétés dépréciées -- {{domxref("FetchEvent.client")}} {{readonlyInline}} - - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.client")}} {{readonlyInline}} + - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. ## Méthodes _Hérite de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("FetchEvent.respondWith()")}} - - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). + - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). - {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}} - - : Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. + - : Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. ## Exemples -Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. +Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. -Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. +Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md index d5d6b5b6d7..ade4d94854 100644 --- a/files/fr/web/api/file/index.md +++ b/files/fr/web/api/file/index.md @@ -10,10 +10,10 @@ translation_of: Web/API/File L’interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus. -Les objets `File` sont généralements obtenus à partir de : +Les objets `File` sont généralements obtenus à partir de : -- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; -- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; +- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; +- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; - l’API `mozGetAsFile()` de l’élément {{domxref("HTMLCanvasElement")}}. Dans Gecko, le code privilégié peut créer des objets `File` représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.) @@ -40,7 +40,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ - {{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}} - : Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative. -`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : +`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : - {{domxref("File.size")}} {{readonlyinline}} - : Renvoie la taille du fichier en octets. @@ -49,7 +49,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ ## Méthodes -_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ +_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ - {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}} - : Renvoie un nouvel objet `Blob` contenant les données du blob source comprises dans l’intervalle d’octets spécifié. @@ -82,7 +82,7 @@ _L’interface `File` ne définit aucune méthode, mais hérite des méthodes de BlobPropertyBag properties ); -- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. +- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. ## Voir aussi diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md index c602bf4d7e..7f44245d7a 100644 --- a/files/fr/web/api/file/using_files_from_web_applications/index.md +++ b/files/fr/web/api/file/using_files_from_web_applications/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/File/Using_files_from_web_applications Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer. -Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. +Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. ## Accéder au(x) fichier(s) sélectionné(s) -Examinez ce code HTML : +Examinez ce code HTML : ```html <input type="file" id="input"> @@ -26,13 +26,13 @@ L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objet Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}. -Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : +Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : ```js var fichierSelectionne = document.getElementById('input').files[0]; ``` -Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : +Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : ```js var fichierSelectionne = $('#input').get(0).files[0]; @@ -40,29 +40,29 @@ var fichierSelectionne = $('#input').get(0).files[0]; var fichierSelectionne = $('#input')[0].files[0]; ``` -> **Note :** Si vous rencontrez une erreur "`files is undefined`" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "`files`". +> **Note :** Si vous rencontrez une erreur "`files is undefined`" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "`files`". ## Accéder au(x) fichier(s) sélectionné(s) sur un événement _change_ -Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : +Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : ```html <input type="file" id="input" onchange="handleFiles(this.files)"> ``` -La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. +La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. -Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : +Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : ```html <input type="file" id="input" multiple onchange="handleFiles(this.files)"> ``` -La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. +La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. ### Ajouter dynamiquement un gestionnaire d'événement _change_ -Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : +Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : ```js var inputElement = document.getElementById("inputField"); @@ -72,17 +72,17 @@ function handleFiles() { } ``` -Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. +Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. ## Obtenir des informations sur le(s) fichier(s) sélectionné(s) -L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : +L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : ```js var numFiles = files.length; ``` -Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : +Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : ```js for (var i = 0, numFiles = files.length; i < numFiles; i++) { @@ -100,11 +100,11 @@ L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seul - `size` - : La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits. - `type` - - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. + - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. -### Exemple : Afficher la taille d'un ou plusieurs fichiers +### Exemple : Afficher la taille d'un ou plusieurs fichiers -L'exemple suivant montre une utilisation possible de la propriété `size` : +L'exemple suivant montre une utilisation possible de la propriété `size` : ```html <!DOCTYPE html> @@ -143,16 +143,16 @@ function updateSize() { ## Utiliser des éléments _input_ masqués de type _file_ avec l'événement `click` -Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. +Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. -Examinez cet extrait de code HTML : +Examinez cet extrait de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> ``` -Le code gérant l'événement `click` peut être écrit de cette façon : +Le code gérant l'événement `click` peut être écrit de cette façon : ```js var fileSelect = document.getElementById("fileSelect"), @@ -170,9 +170,9 @@ Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouve ## Utiliser un élément _label_ pour activer un élément _input_ masqué de type _file_ -Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). +Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). -Examinez ce morceau de code HTML : +Examinez ce morceau de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label> @@ -184,7 +184,7 @@ Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à `fileElem.click Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (_drag and drop_) des fichiers dans votre application web. -La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : +La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : ```js var dropbox; @@ -197,7 +197,7 @@ dropbox.addEventListener("drop", drop, false); Dans cet exemple, l'élément portant l'ID `dropbox` devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}. -Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : +Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : ```js function dragenter(e) { @@ -211,7 +211,7 @@ function dragover(e) { } ``` -La vraie magie est dans la fonction `drop()` : +La vraie magie est dans la fonction `drop()` : ```js function drop(e) { @@ -225,11 +225,11 @@ function drop(e) { } ``` -Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. +Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. -## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur +## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur -Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : +Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : ```js function handleFiles(files) { @@ -253,29 +253,29 @@ function handleFiles(files) { } ``` -La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. +La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. -La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. +La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. -Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. +Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. ## Utiliser un objet URLs -Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. +Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. -Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : +Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : ```js var objectURL = window.URL.createObjectURL(fileObj); ``` -L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : +L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : ```js window.URL.revokeObjectURL(objectURL); ``` -## Exemple : Utilisation de l'objet URLs pour afficher des images +## Exemple : Utilisation de l'objet URLs pour afficher des images Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles. @@ -291,7 +291,7 @@ Le code HTML qui présente l'interface ressemble à ceci: Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément `input` étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers. -Voici la méthode `handleFiles()` : +Voici la méthode `handleFiles()` : ```js window.URL = window.URL || window.webkitURL; @@ -333,28 +333,28 @@ function handleFiles(files) { } ``` -Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. +Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. -Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : +Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : -1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. +1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. 2. L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}. -3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : +3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : 1. Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}. 2. Création d'un nouvel élément image {{ HTMLElement("img") }}. 3. Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob. 4. Définition de la hauteur de l'image à 60 pixels. - 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. - 6. Ajout du nouvel élément à la liste. + 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. + 6. Ajout du nouvel élément à la liste. -## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur +## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (_upload_) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone. -### Créer les tâches de téléchargement +### Créer les tâches de téléchargement -En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : +En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : ```js function sendFiles() { @@ -366,11 +366,11 @@ function sendFiles() { } ``` -La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. +La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. ### Manipuler le processus de téléchargement pour un fichier -La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. +La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. ```js function FileUpload(img, file) { @@ -401,18 +401,18 @@ function FileUpload(img, file) { } ``` -La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. +La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. -Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : +Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : -1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. -2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. -3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. -4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. -5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. -6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. +1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. +2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. +3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. +4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. +5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. +6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. -> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. +> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. ### Gérer le processus de téléchargement d'un fichier de manière asynchrone @@ -420,63 +420,63 @@ Il est nécessaire de prévoir quelques étapes préparatoires avant le téléch <?php if (isset($_FILES['myFile'])) { // Exemple: - move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); - exit; + move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); + exit; } ?> <!DOCTYPE html> <html> <head> - <title>dnd binary upload</title> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <script type="text/javascript"> - function sendFile(file) { - var uri = "/index.php"; - var xhr = new XMLHttpRequest(); - var fd = new FormData(); - - xhr.open("POST", uri, true); - xhr.onreadystatechange = function() { - if (xhr.readyState == 4 && xhr.status == 200) { - // Handle response. - alert(xhr.responseText); // handle response. - } - }; - fd.append('myFile', file); - // Initiate a multipart/form-data upload - xhr.send(fd); - } - - window.onload = function() { - var dropzone = document.getElementById("dropzone"); - dropzone.ondragover = dropzone.ondragenter = function(event) { - event.stopPropagation(); - event.preventDefault(); - } - - dropzone.ondrop = function(event) { - event.stopPropagation(); - event.preventDefault(); - - var filesArray = event.dataTransfer.files; - for (var i=0; i<filesArray.length; i++) { - sendFile(filesArray[i]); - } - } - } - </script> + <title>dnd binary upload</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <script type="text/javascript"> + function sendFile(file) { + var uri = "/index.php"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + + + + + + + + + + + + } + + ndow + var d + dropzone.ondragover = dropz + + event.preventDefault(); + } + + dropzone.ond + event.stopPropagation(); + event.preventDefault(); + + v + + + + } + } + </script> </head> <body> - <div> - <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> - </div> + <div> + <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> + </div> </body> </html> ``` -## Exemple : Utiliser un objet URLs pour afficher un PDF +## Exemple : Utiliser un objet URLs pour afficher un PDF -Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. +Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie à `false` {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local. @@ -484,7 +484,7 @@ Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie <iframe id="viewer"> ``` -Et voici comment modifier la valeur de l'attribut `src` : +Et voici comment modifier la valeur de l'attribut `src` : ```js var obj_url = window.URL.createObjectURL(blob); @@ -493,9 +493,9 @@ iframe.setAttribute('src', obj_url); window.URL.revokeObjectURL(obj_url); ``` -## Exemple : Utiliser un objet URLs avec d'autres types de fichiers +## Exemple : Utiliser un objet URLs avec d'autres types de fichiers -Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur : +Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur : ```js var video = document.getElementById('video'); @@ -507,7 +507,7 @@ window.URL.revokeObjectURL(obj_url); ## Spécifications -- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) +- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) - [File API](http://www.w3.org/TR/FileAPI/) ## Voir aussi diff --git a/files/fr/web/api/file_and_directory_entries_api/index.md b/files/fr/web/api/file_and_directory_entries_api/index.md index 847709ebac..5d1c98d3c0 100644 --- a/files/fr/web/api/file_and_directory_entries_api/index.md +++ b/files/fr/web/api/file_and_directory_entries_api/index.md @@ -14,7 +14,7 @@ Deux API très simulaires existent en fonction du comportement asynchrone ou syn L'API asynchrone a les interfaces suivantes : -- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet [window](/fr/docs/window) et le worker global scope. +- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet [window](/fr/docs/window) et le worker global scope. - [FileSystem](/en/DOM/File_API/File_System_API/FileSystem) représente un fichier système. L'objet est la passerelle à votre API toute entière. - [Entry](/en/DOM/File_API/File_System_API/Entry) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntry](/en/DOM/File_API/File_System_API/DirectoryEntry) représente un dossier dans un fichier système. @@ -26,11 +26,11 @@ L'API asynchrone a les interfaces suivantes : L'API synchrone est utile avec les [WebWorkers](/En/Using_web_workers). Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs. -- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker. +- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker. - [FileSystemSync](/en/DOM/File_API/File_System_API/FileSystemSync) représente un fichier système. - [EntrySync](/en/DOM/File_API/File_System_API/EntrySync) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntrySync](/en/DOM/File_API/File_System_API/DirectoryEntrySync) représente un dossier dans un fichier système. -- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. +- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. - [FileEntrySync](/en/DOM/File_API/File_System_API/FileEntrySync) représente un fichier dans un fichier système. - [FileException](/en/DOM/File_API/File_System_API/FileException) est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones. diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md index 5e13f908c3..1f70ffaec3 100644 --- a/files/fr/web/api/filereader/filereader/index.md +++ b/files/fr/web/api/filereader/filereader/index.md @@ -8,9 +8,9 @@ tags: - Reference translation_of: Web/API/FileReader/FileReader --- -**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. +**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. -Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). +Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). ## Syntaxe @@ -24,15 +24,15 @@ Aucun. ## Exemple -L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: +L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: ```js function printFile(file) { var reader = new FileReader(); reader.onload = function(evt) { - console.log(evt.target.result); - }; - reader.readAsText(file); + console.log(evt.target.result); + }; + reader.readAsText(file); } ``` diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md index 418c9f4f88..e686044719 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.md +++ b/files/fr/web/api/filereader/readasbinarystring/index.md @@ -27,9 +27,9 @@ L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée. ```js var canvas = document.createElement('canvas'); var height = 200; -var width = 200; +var width = 200; -canvas.width = width; +canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); @@ -46,7 +46,7 @@ canvas.toBlob(function (blob) { console.log(reader.result); } - reader.readAsBinaryString(blob); + reader.readAsBinaryString(blob); }); ``` diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md index 63833ac3b9..c1bb3f7a83 100644 --- a/files/fr/web/api/filereader/readastext/index.md +++ b/files/fr/web/api/filereader/readastext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FileReader/readAsText --- {{APIRef("File API")}} -La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. +La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. ## Syntaxe @@ -20,7 +20,7 @@ La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob ### Parameters - `blob` - - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. + - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. - encoding {{optional_inline}} - : Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié. diff --git a/files/fr/web/api/filerequest/onprogress/index.md b/files/fr/web/api/filerequest/onprogress/index.md index 82f162eb8c..9f5f022f9e 100644 --- a/files/fr/web/api/filerequest/onprogress/index.md +++ b/files/fr/web/api/filerequest/onprogress/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FileRequest/onprogress --- {{APIRef("File System API")}} {{non-standard_header}} -Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet {{ domxref("FileRequest") }} est en cours. +Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet {{ domxref("FileRequest") }} est en cours. ## Syntaxe diff --git a/files/fr/web/api/force_touch_events/index.md b/files/fr/web/api/force_touch_events/index.md index 665399eaa6..9debb9689f 100644 --- a/files/fr/web/api/force_touch_events/index.md +++ b/files/fr/web/api/force_touch_events/index.md @@ -21,9 +21,9 @@ translation_of: Web/API/Force_Touch_events - {{event("webkitmouseforcedown")}} {{non-standard_inline}} - : Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force". - {{event("webkitmouseforceup")}} {{non-standard_inline}} - - : Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force". + - : Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force". - {{event("webkitmouseforcechanged")}} {{non-standard_inline}} - - : Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}. + - : Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}. ## Propriété des évènements diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md index bc20d3847b..4bd06c1e59 100644 --- a/files/fr/web/api/formdata/append/index.md +++ b/files/fr/web/api/formdata/append/index.md @@ -15,13 +15,13 @@ translation_of: Web/API/FormData/append La méthode **`append()`** de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet `FormData`, ou rajoute cette clé et cette valeur quand elle n'existe pas. -La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. +La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. > **Note :** Cette méthode est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API). ## Syntaxe -Il y a deux versions de cette méthode : avec deux ou trois paramètres +Il y a deux versions de cette méthode : avec deux ou trois paramètres ```js formData.append(name, value); @@ -33,11 +33,11 @@ formData.append(name, value, filename); - `name` - : Le nom de la clé dont les données sont contenues dans `value`. - `value` - - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). + - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). - `filename` {{optional_inline}} - - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. + - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. -> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. +> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. ### Retours @@ -45,20 +45,20 @@ Void. ## Exemple -La ligne suivante crée un objet `FormData` vide : +La ligne suivante crée un objet `FormData` vide : ```js var formData = new FormData(); // Actuellement vide ``` -Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: +Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: ```js formData.append('username', 'Chris'); formData.append('userpic', myFileInput.files[0], 'chris.jpg'); ``` -Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): +Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): ```js formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg'); diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md index b8c8df5899..39b2b84207 100644 --- a/files/fr/web/api/formdata/entries/index.md +++ b/files/fr/web/api/formdata/entries/index.md @@ -13,10 +13,10 @@ translation_of: Web/API/FormData/entries --- {{APIRef("XMLHttpRequest")}} -La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. -La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}. +La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. +La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}. -> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -24,7 +24,7 @@ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, ### Valeur retournée -Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. +Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. ## Exemple diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md index 44427eb965..d935583c84 100644 --- a/files/fr/web/api/formdata/formdata/index.md +++ b/files/fr/web/api/formdata/formdata/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/FormData/FormData --- {{APIRef("XMLHttpRequest")}} -Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. +Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. -> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -25,23 +25,23 @@ var formData = new FormData(form) ### Paramètres - `form` {{optional_inline}} - - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. + - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. ## Exemples -La ligne suivante crée un objet `FormData` vide: +La ligne suivante crée un objet `FormData` vide: ```js var formData = new FormData(); // Formulaire vide à cet instant ``` -Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : +Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : ```js formData.append('username', 'Chris'); ``` -Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : +Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : ```html <form id="myForm" name="myForm"> diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md index 80f00db03e..50c672e3be 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.md +++ b/files/fr/web/api/formdata/using_formdata_objects/index.md @@ -12,11 +12,11 @@ tags: translation_of: Web/API/FormData/Using_FormData_Objects original_slug: Web/API/FormData/Utilisation_objets_FormData --- -L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`. +L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`. ## Création intégrale d’un objet FormData -Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : +Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : ```js var formData = new FormData(); @@ -38,9 +38,9 @@ request.open("POST", "http://foo.com/submitform.php"); request.send(formData); ``` -> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). +> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). -Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. +Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. ## Récupération d’un objet FormData dans un formulaire HTML @@ -59,7 +59,7 @@ request.open("POST", "submitform.php"); request.send(new FormData(formElement)); ``` -Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : +Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : ```js var formElement = document.querySelector("form"); @@ -72,76 +72,76 @@ request.send(formData); Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier. -## Envoi de fichiers via un objet FormData +## Envoi de fichiers via un objet FormData -L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : +L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : ```html <form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Votre adresse électronique :</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Étiquette du fichier personnalisé :</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>Fichier à mettre de côté :</label> - <input type="file" name="file" required /> - <input type="submit" value="Mettez le fichier de côté." /> + <label>Votre adresse électronique :</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Étiquette du fichier personnalisé :</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>Fichier à mettre de côté :</label> + <input type="file" name="file" required /> + <input type="submit" value="Mettez le fichier de côté." /> </form> <div></div> ``` -Vous pouvez ensuite l’envoyer à l’aide du code suivant : +Vous pouvez ensuite l’envoyer à l’aide du code suivant : ```js var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { - var oOutput = document.querySelector("div"), + var oOutput = document.querySelector("div"), oData = new FormData(form); - oData.append("CustomField", "Données supplémentaires"); + oData.append("CustomField", "Données supplémentaires"); - var oReq = new XMLHttpRequest(); - oReq.open("POST", "stash.php", true); - oReq.onload = function(oEvent) { - if (oReq.status == 200) { - oOutput.innerHTML = "Envoyé !"; - } else { - oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; - } - }; + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Envoyé !"; + } else { + oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; + } + }; - oReq.send(oData); + oReq.send(oData); ev.preventDefault(); }, false); ``` > **Note :** Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open(). -Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : +Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : ```js data.append("myfile", myBlob, "filename.txt"); ``` -Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. +Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. -Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : +Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : ```js var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "Données supplémentaires"); $.ajax({ - url: "stash.php", - type: "POST", - data: fd, - processData: false, // dire à jQuery de ne pas traiter les données - contentType: false // dire à jQuery de ne pas définir le contentType + url: "stash.php", + type: "POST", + data: fd, + processData: false, // dire à jQuery de ne pas traiter les données + contentType: false // dire à jQuery de ne pas définir le contentType }); ``` -## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` +## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` -Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. +Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. ## Voir aussi diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md index 554b01e01d..c4b6c094e7 100644 --- a/files/fr/web/api/fullscreen_api/index.md +++ b/files/fr/web/api/fullscreen_api/index.md @@ -23,12 +23,12 @@ Prenons cet élément {{ HTMLElement("video") }} : ```html <video controls id="myvideo"> - <source src="somevideo.webm"></source> - <source src="somevideo.mp4"></source> + <source src="somevideo.webm"></source> + <source src="somevideo.mp4"></source> </video> ``` -Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : +Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : ```js var elem = document.getElementById("myvideo"); @@ -43,8 +43,8 @@ Il est important de savoir qu'il y a une différence clef entre les implémentat ```css #myvideo:-webkit-full-screen { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } ``` @@ -52,48 +52,48 @@ Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko ### Notification -Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. +Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. ### Lorsqu'une demande de plein écran échoue -Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré. +Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré. > **Note :** Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées. ## Sortie du mode plein écran -L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . +L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . ## Autres informations -Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : +Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : - {{ domxref("document.fullscreenElement", "fullscreenElement") }} - - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. + - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. - {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }} - - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. + - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. ## Choses que vos utilisateurs doivent savoir -Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran. +Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran. -En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon. +En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon. ## Exemple -Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo. +Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo. [Voir l'exemple sur une page](/samples/domref/fullscreen.html) ### Action sur la touche <kbd>Entrée</kbd> -Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . +Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . ```js document.addEventListener("keydown", function(e) { - if (e.keyCode == 13) { - toggleFullScreen(); - } + if (e.keyCode == 13) { + toggleFullScreen(); + } }, false); ``` @@ -113,9 +113,9 @@ function toggleFullScreen() { } ``` -Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}. +Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}. -Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. +Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. ## Préfixes diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md index a31634b587..f377937e23 100644 --- a/files/fr/web/api/gainnode/index.md +++ b/files/fr/web/api/gainnode/index.md @@ -65,7 +65,7 @@ Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("Aud | Spécification | Statuts | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/gamepad/index.md b/files/fr/web/api/gamepad/index.md index 8fb2bd5cda..e52fe8886f 100644 --- a/files/fr/web/api/gamepad/index.md +++ b/files/fr/web/api/gamepad/index.md @@ -15,9 +15,9 @@ Un objet `Gamepad` peut être retourné de deux manières : ## Propriétés - {{domxref("Gamepad.axes")}} {{readonlyInline}} - - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). + - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). - {{domxref("Gamepad.buttons")}} {{readonlyInline}} - - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. + - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. - {{domxref("Gamepad.connected")}} {{readonlyInline}} - : Un booléen indiquant si la manette est toujours connectée au système. - {{domxref("Gamepad.displayId")}} {{readonlyInline}} diff --git a/files/fr/web/api/gamepad_api/index.md b/files/fr/web/api/gamepad_api/index.md index 2548f041e8..681df27f87 100644 --- a/files/fr/web/api/gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Gamepad_API --- {{DefaultAPISidebar("Gamepad API")}} -L'**API Gamepad** est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement. +L'**API Gamepad** est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement. ## Interfaces diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md index 5a152773d4..4004757091 100644 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md @@ -22,55 +22,55 @@ Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi : ```js window.addEventListener("gamepadconnected", function(e) { - console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", - e.gamepad.index, e.gamepad.id, - e.gamepad.buttons.length, e.gamepad.axes.length); + console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", + e.gamepad.index, e.gamepad.id, + e.gamepad.buttons.length, e.gamepad.axes.length); }); ``` -Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. +Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. > **Note :** À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles. ## Déconnexion du contrôleur -Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}. +Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}. ```js window.addEventListener("gamepaddisconnected", function(e) { - console.log("Contrôleur n°%d déconnecté : %s", - e.gamepad.index, e.gamepad.id); + console.log("Contrôleur n°%d déconnecté : %s", + e.gamepad.index, e.gamepad.id); }); ``` -La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}. +La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}. ```js var gamepads = {}; function gamepadHandler(event, connecting) { - var gamepad = event.gamepad; + var gamepad = event.gamepad; // Note : // gamepad === navigator.getGamepads()[gamepad.index] - if (connecting) { - gamepads[gamepad.index] = gamepad; - } else { - delete gamepads[gamepad.index]; - } + if (connecting) { + gamepads[gamepad.index] = gamepad; + } else { + delete gamepads[gamepad.index]; + } } window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false); window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false); ``` -Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. +Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. \[PAGE NON TRADUITE DEPUIS ICI...] ## Querying the Gamepad object -As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires. +As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires. Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads. @@ -165,7 +165,7 @@ function pollGamepads() { } ``` -Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen. In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions. +Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen. In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions. After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again. @@ -213,107 +213,107 @@ This example shows how to use the {{ domxref("Gamepad") }} object, as well as th var haveEvents = 'GamepadEvent' in window; var controllers = {}; var rAF = window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.requestAnimationFrame; + window.webkitRequestAnimationFrame || + window.requestAnimationFrame; function connecthandler(e) { - addgamepad(e.gamepad); + addgamepad(e.gamepad); } function addgamepad(gamepad) { - controllers[gamepad.index] = gamepad; var d = document.createElement("div"); - d.setAttribute("id", "controller" + gamepad.index); - var t = document.createElement("h1"); - t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); - d.appendChild(t); - var b = document.createElement("div"); - b.className = "buttons"; - for (var i=0; i<gamepad.buttons.length; i++) { - var e = document.createElement("span"); - e.className = "button"; - //e.id = "b" + i; - e.innerHTML = i; - b.appendChild(e); - } - d.appendChild(b); - var a = document.createElement("div"); - a.className = "axes"; - for (var i=0; i<gamepad.axes.length; i++) { - var e = document.createElement("progress"); - e.className = "axis"; - //e.id = "a" + i; - e.setAttribute("max", "2"); - e.setAttribute("value", "1"); - e.innerHTML = i; - a.appendChild(e); - } - d.appendChild(a); - document.getElementById("start").style.display = "none"; - document.body.appendChild(d); - rAF(updateStatus); + controllers[gamepad.index] = gamepad; var d = document.createElement("div"); + d.setAttribute("id", "controller" + gamepad.index); + var t = document.createElement("h1"); + t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); + d.appendChild(t); + var b = document.createElement("div"); + b.className = "buttons"; + for (var i=0; i<gamepad.buttons.length; i++) { + var e = document.createElement("span"); + e.className = "button"; + //e.id = "b" + i; + e.innerHTML = i; + b.appendChild(e); + } + d.appendChild(b); + var a = document.createElement("div"); + a.className = "axes"; + for (var i=0; i<gamepad.axes.length; i++) { + var e = document.createElement("progress"); + e.className = "axis"; + //e.id = "a" + i; + e.setAttribute("max", "2"); + e.setAttribute("value", "1"); + e.innerHTML = i; + a.appendChild(e); + } + d.appendChild(a); + document.getElementById("start").style.display = "none"; + document.body.appendChild(d); + rAF(updateStatus); } function disconnecthandler(e) { - removegamepad(e.gamepad); + removegamepad(e.gamepad); } function removegamepad(gamepad) { - var d = document.getElementById("controller" + gamepad.index); - document.body.removeChild(d); - delete controllers[gamepad.index]; + var d = document.getElementById("controller" + gamepad.index); + document.body.removeChild(d); + delete controllers[gamepad.index]; } function updateStatus() { - if (!haveEvents) { - scangamepads(); - } - for (j in controllers) { - var controller = controllers[j]; - var d = document.getElementById("controller" + j); - var buttons = d.getElementsByClassName("button"); - for (var i=0; i<controller.buttons.length; i++) { - var b = buttons[i]; - var val = controller.buttons[i]; - var pressed = val == 1.0; - if (typeof(val) == "object") { - pressed = val.pressed; - val = val.value; - } - var pct = Math.round(val * 100) + "%" - b.style.backgroundSize = pct + " " + pct; - if (pressed) { - b.className = "button pressed"; - } else { - b.className = "button"; - } - } - - var axes = d.getElementsByClassName("axis"); - for (var i=0; i<controller.axes.length; i++) { - var a = axes[i]; - a.innerHTML = i + ": " + controller.axes[i].toFixed(4); - a.setAttribute("value", controller.axes[i] + 1); - } - } - rAF(updateStatus); + if (!haveEvents) { + scangamepads(); + } + for (j in controllers) { + var controller = controllers[j]; + var d = document.getElementById("controller" + j); + var buttons = d.getElementsByClassName("button"); + for (var i=0; i<controller.buttons.length; i++) { + var b = buttons[i]; + var val = controller.buttons[i]; + var pressed = val == 1.0; + if (typeof(val) == "object") { + pressed = val.pressed; + val = val.value; + } + var pct = Math.round(val * 100) + "%" + b.style.backgroundSize = pct + " " + pct; + if (pressed) { + b.className = "button pressed"; + } else { + b.className = "button"; + } + } + + var axes = d.getEl + for (var i=0; i<co + var a = axes[i]; + a.innerHTML = i + ": " + controller.axes[i].toFi + a.setAttribute("value", controller.axes[i] + 1); + } + } + rAF(updateStatus); } function scangamepads() { var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); - for (var i = 0; i < gamepads.length; i++) { - if (gamepads[i]) { - if (!(gamepads[i].index in controllers)) { - addgamepad(gamepads[i]); - } else { - controllers[gamepads[i].index] = gamepads[i]; - } - } - } + for (var i = 0; i < gamepads.length; i++) { + if (gamepads[i]) { + if (!(gamepads[i].index in controllers)) { + addgamepad(gamepads[i]); + } else { + controllers[gamepads[i].index] = gamepads[i]; + } + } + } } window.addEventListener("gamepadconnected", connecthandler); window.addEventListener("gamepaddisconnected", disconnecthandler); if (!haveEvents) { - setInterval(scangamepads, 500); + setInterval(scangamepads, 500); } ``` diff --git a/files/fr/web/api/geolocation/clearwatch/index.md b/files/fr/web/api/geolocation/clearwatch/index.md index e3cf88e859..26f9b600ff 100644 --- a/files/fr/web/api/geolocation/clearwatch/index.md +++ b/files/fr/web/api/geolocation/clearwatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Geolocation/clearWatch --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. +La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ress ### Paramètres - _id_ - - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. + - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. ## Exemple diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md index 035dbab103..e3d1a83624 100644 --- a/files/fr/web/api/geolocation/index.md +++ b/files/fr/web/api/geolocation/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/Geolocation --- {{APIRef("Geolocation API")}} -En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. +En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. -On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . +On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . -> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. +> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. ## Propriétés @@ -23,14 +23,14 @@ _L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété._ ## Méthodes -_L'interface de géolocalisation n'hérite d'aucune méthode._ +_L'interface de géolocalisation n'hérite d'aucune méthode._ - {{domxref("Geolocation.getCurrentPosition()")}} - - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. + - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. - {{domxref("Geolocation.watchPosition()")}} - - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. + - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. - {{domxref("Geolocation.clearWatch()")}} - - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. + - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. ## Spécifications diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md index 71ed0cfc2c..d09d9d224a 100644 --- a/files/fr/web/api/geolocation/watchposition/index.md +++ b/files/fr/web/api/geolocation/watchposition/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Geolocation/watchPosition --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. +La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. -Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. +Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. ## Syntaxe @@ -23,7 +23,7 @@ Cette méthode retourne une valeur ID de veille qui permet de libérer les fonct ### Paramètres - _success_ - - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. + - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. - _error_ {{optional_inline}} - : Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}. - _options_ {{optional_inline}} @@ -61,7 +61,7 @@ options = { id = navigator.geolocation.watchPosition(success, error, options); ``` -> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint. +> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint. ## Spécifications diff --git a/files/fr/web/api/geolocationpositionerror/index.md b/files/fr/web/api/geolocationpositionerror/index.md index 0a03eb4bee..988b078756 100644 --- a/files/fr/web/api/geolocationpositionerror/index.md +++ b/files/fr/web/api/geolocationpositionerror/index.md @@ -17,7 +17,7 @@ _L'interface `GeolocationPositionError` n'hérite d'aucune propriété._ | Valeur | Constante associée | Description | | ------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | + | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | | `2` | `POSITION_UNAVAILABLE` | L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne. | | `3` | `TIMEOUT` | Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu. | diff --git a/files/fr/web/api/globaleventhandlers/index.md b/files/fr/web/api/globaleventhandlers/index.md index 816fd6e0e6..c260b68027 100644 --- a/files/fr/web/api/globaleventhandlers/index.md +++ b/files/fr/web/api/globaleventhandlers/index.md @@ -115,7 +115,7 @@ Les propriétés des évènements, de la forme `onXYZ`, sont définies sur {{dom - {{domxref("GlobalEventHandlers.onmouseup")}} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché. - {{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}} - - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. + - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. - {{ domxref("GlobalEventHandlers.onwheel") }} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché. - {{domxref("GlobalEventHandlers.onpause")}} diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.md b/files/fr/web/api/globaleventhandlers/onabort/index.md index 85348853fa..6ac2842916 100644 --- a/files/fr/web/api/globaleventhandlers/onabort/index.md +++ b/files/fr/web/api/globaleventhandlers/onabort/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/GlobalEventHandlers/onabort --- {{ ApiRef("HTML DOM") }} -Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). +Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). Bien que le [standard pour l'abandon d'un chargement de document](https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document) soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une `window` qui déclencherait un appel à `onabort`. -À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises `img`. +À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises `img`. ## Syntaxe @@ -35,7 +35,7 @@ window.onabort = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.md b/files/fr/web/api/globaleventhandlers/onblur/index.md index 1ae6bb272a..286ccc3d95 100644 --- a/files/fr/web/api/globaleventhandlers/onblur/index.md +++ b/files/fr/web/api/globaleventhandlers/onblur/index.md @@ -16,7 +16,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte element.onblur = nomFonctionUtilisateur; -- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : +- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : <!----> @@ -26,7 +26,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte ### Exemple -Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. +Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. ```html <form> @@ -37,7 +37,7 @@ Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », var elem = document.getElementById("foo"); -// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, +// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, // il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction elem.onblur = afficherMessage; diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.md b/files/fr/web/api/globaleventhandlers/onchange/index.md index bb1eff3e49..669a38b5d6 100644 --- a/files/fr/web/api/globaleventhandlers/onchange/index.md +++ b/files/fr/web/api/globaleventhandlers/onchange/index.md @@ -19,7 +19,7 @@ La propriété `onchange` définit et renvoie le gestionnaire d'évènement `onC ### Notes -Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : +Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : control.onfocus = focus; control.onblur = blur; @@ -28,7 +28,7 @@ Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement ` } function blur () { - if (control.value != original_value) + if (control.value != original_value) control.onchange(); } @@ -40,4 +40,4 @@ Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'év ### Voir aussi -- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) +- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.md b/files/fr/web/api/globaleventhandlers/onclick/index.md index 3c09f4fd85..b2df3b5bc4 100644 --- a/files/fr/web/api/globaleventhandlers/onclick/index.md +++ b/files/fr/web/api/globaleventhandlers/onclick/index.md @@ -15,7 +15,7 @@ La propriété **onclick** représente le gestionnaire d'évènement onClick de où _functionRef_ est une fonction ou une expression de type _function._ Consulter la [référence des fonctions](/en-US/docs/JavaScript/Reference/Functions_and_function_scope) pour plus de détails. -Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. +Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. ### Exemple diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.md b/files/fr/web/api/globaleventhandlers/onclose/index.md index bf698535b2..a577479e5b 100644 --- a/files/fr/web/api/globaleventhandlers/onclose/index.md +++ b/files/fr/web/api/globaleventhandlers/onclose/index.md @@ -31,4 +31,4 @@ window.onclose = resetThatServerThing; | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.md b/files/fr/web/api/globaleventhandlers/ondblclick/index.md index db9380a8bd..a4ecb0a523 100644 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.md +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.md @@ -17,7 +17,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d element.ondblclick = nomDeFonction; -- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : +- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : <!----> @@ -35,7 +35,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d function initElement() { var p = document.getElementById("foo"); - // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, + // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction. p.ondblclick = showAlert; }; diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.md b/files/fr/web/api/globaleventhandlers/onerror/index.md index 0da6eab128..860a5f2b41 100644 --- a/files/fr/web/api/globaleventhandlers/onerror/index.md +++ b/files/fr/web/api/globaleventhandlers/onerror/index.md @@ -10,14 +10,14 @@ translation_of: Web/API/GlobalEventHandlers/onerror --- {{ApiRef("HTML DOM")}} -Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: +Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: -- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. -- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. +- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. +- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. ## Syntaxe -Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. +Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. ### window\.onerror @@ -25,23 +25,23 @@ Pour des raisons historiques, des arguments différents sont passés aux gestio window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... } ``` -Paramètres de la fonction : +Paramètres de la fonction : - `message` : message d'erreur (chaîne ou objet évènement). Disponible comme `event` (sic !) dans le gestionnaire de HTML `onerror=""`. - source : l'URL du script où l'erreur a été déclenchée (chaîne) -- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) -- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) -- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} +- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) +- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) +- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} -### element.onerror (et `window.addEventListener('error')`) +### element.onerror (et `window.addEventListener('error')`) element.onerror = function(event) { ... } -`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. +`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. ## Notes -Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript. +Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript. window.onerror = function (msg, url, noLigne, noColonne, erreur) { var chaine = msg.toLowerCase(); @@ -63,13 +63,13 @@ Quand une erreur de syntaxe**(?)** se produit dans un script chargé à parti return false; }; -Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. +Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md index 5401fc38c2..d5fa8d43f1 100644 --- a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md +++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md @@ -31,7 +31,7 @@ function init() { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | -| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | +| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.md b/files/fr/web/api/globaleventhandlers/onreset/index.md index 8227bf6d7a..31c306baa8 100644 --- a/files/fr/web/api/globaleventhandlers/onreset/index.md +++ b/files/fr/web/api/globaleventhandlers/onreset/index.md @@ -40,7 +40,7 @@ function hit() { <form> <input type="reset" value="reset" /> </form> - <div id="d"> </div> + <div id="d"> </div> </body> </html> ``` @@ -53,7 +53,7 @@ L'évènement `reset` est déclenché quand l'utilisateur clique sur le bouton d | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.md b/files/fr/web/api/globaleventhandlers/onresize/index.md index 3ee94157c2..b18387cce1 100644 --- a/files/fr/web/api/globaleventhandlers/onresize/index.md +++ b/files/fr/web/api/globaleventhandlers/onresize/index.md @@ -59,7 +59,7 @@ window.onresize = sayHi; ### Notes -Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement. +Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement. ### Spécification diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.md b/files/fr/web/api/globaleventhandlers/onwheel/index.md index 2c85e2e382..a645f6cb0e 100644 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.md +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/Element/onwheel --- {{ ApiRef("DOM") }} -La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. +La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. ## Syntaxe @@ -24,7 +24,7 @@ element.onwheel = function() { .. } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md index 88237327df..8219532411 100644 --- a/files/fr/web/api/headers/index.md +++ b/files/fr/web/api/headers/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Headers --- {{APIRef("Fetch API")}} -L'interface `Headers` de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet `Headers` a une liste `Headers` associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des `Headers` sont reliés à une séquence d'octets sensible à la case. +L'interface `Headers` de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet `Headers` a une liste `Headers` associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des `Headers` sont reliés à une séquence d'octets sensible à la case. -Pour des raisons de sécurité, les `Headers` ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. +Pour des raisons de sécurité, les `Headers` ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. -Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. +Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. Vous pouvez récuperer un objet `Header` via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet `Header` en utilisant le constructeur {{domxref("Headers.Headers()")}}. @@ -46,13 +46,13 @@ Un objet implémentant `Headers` peut directement être utilisé dans une struct - {{domxref("Headers.has()")}} - : Retourne un booléen indiquant si un objet `Headers` contient un certain header. - {{domxref("Headers.keys()")}} - - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. + - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. - {{domxref("Headers.set()")}} - : Définti une nouvelle valeur pour un header existant dans un objet `Headers`, ou ajoute le header s'il n'existe pas déjà. - {{domxref("Headers.values()")}} - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet. -> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code. +> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code. > **Note :** Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses. @@ -74,7 +74,7 @@ monHeader.append('Content-Type', 'text/xml'); monHeader.get('Content-Type') // doit retourner 'text/xml' ``` -La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. +La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. ```js var mesHeaders = new Headers({ diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md index d9951dcdcc..e830bbe66f 100644 --- a/files/fr/web/api/history/index.md +++ b/files/fr/web/api/history/index.md @@ -8,14 +8,14 @@ translation_of: Web/API/History --- {{APIRef}} -L'interface **`History`** permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte. +L'interface **`History`** permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte. ## Propriétés -*L'interface `History`* *n'hérite d'aucune propriété.* +*L'interface `History`* *n'hérite d'aucune propriété.* - {{domxref("History.length")}} {{readOnlyInline}} - - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. + - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. - {{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}. - {{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} @@ -23,15 +23,15 @@ L'interface **`History`** permet de manipuler l'historique de navigation du n - {{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation. - {{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }} - - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. + - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. ## Méthodes -_L‘interface `History`_ _n‘hérite d‘aucune méthode._ +_L‘interface `History`_ _n‘hérite d‘aucune méthode._ - {{domxref("History.back()")}} - - : Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`. + - : Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`. > **Note :** Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception. @@ -42,18 +42,18 @@ _L‘interface `History`_ _n‘hérite d‘aucune méthode._ > **Note :** Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception. - {{domxref("History.go()")}} - - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). + - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). - {{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }} - - : Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. - {{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }} - - : Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. ## Spécifications diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index a218dcba37..a9473b7582 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -4,26 +4,26 @@ slug: Web/API/History_API/Example translation_of: Web/API/History_API/Example original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example --- -Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : +Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : **page_un.php**: ```php <?php - $page_title = "Page un"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page un"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -36,21 +36,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>first_page.php</strong>.</p> + <p>This is the content of <strong>first_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -58,20 +58,20 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```php <?php - $page_title = "Page deux"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page deux"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -84,21 +84,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>second_page.php</strong>.</p> + <p>This is the content of <strong>second_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -106,19 +106,19 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```php <?php - $page_title = "Page trois"; - $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; - - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - echo json_encode(array("page" => $page_title, "content" => $page_content)); - } else { + $page_title = "Page trois"; + $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; + + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + echo json_encode(array("page" => $page_title, "content" => $page_content)); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -135,9 +135,9 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -145,22 +145,22 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```css #ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; } #ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; } ``` @@ -196,212 +196,212 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p var ajaxRequest = new (function () { - function closeReq () { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq () { - if (!bIsLoading) { return; } - oReq.abort(); - closeReq(); - } - - function ajaxError () { - alert("Unknown error."); - } - - function ajaxLoad () { - var vMsg, nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 100)) { - /* - case 1: - // Informational 1xx - console.log("Information code " + vMsg); - break; - case 2: - // Successful 2xx - console.log("Successful code " + vMsg); - break; - case 3: - // Redirection 3xx - console.log("Redirection code " + vMsg); - break; - */ - case 4: - /* Client Error 4xx */ - alert("Client Error #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } - } - closeReq(); - } - - function filterURL (sURL, sViewMode) { - return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); - } - - function getPage (sPage) { - if (bIsLoading) { return; } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { oPageInfo.url = filterURL(sPage, null); } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); - } - - function requestPage (sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink () { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; - } - - function init () { - oPageInfo.title = document.title; - for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); - } - - const - - /* customizable constants */ - sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - - /* not customizable constants */ - rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href - }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required" - }; - - var - - oReq, bIsLoading = false, bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; + function closeReq () { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq () { + if (!bIsLoadi + oReq.abort( + + } + + fu + alert("Unknown err + } + + function ajaxLoad + var vMsg, nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse + document.title = oPageInfo.title = vMsg.page; + document.getElementById + i + hi + + } + break; + ult: + vMsg = nSta + switch + /* + case 1: + // + consol + bre + 2: + // + consol + + + + con + + */ + case 4: + /* + alert( + bre + 5: + /* S + alert( + bre + + + + + } + closeReq(); + } + + function filterURL (sURL, sView + return sURL.replace(rSearch, + } + + function getPage (sPage) { + if (bIsLoading) { return; } + oReq = new XMLHttpRequest(); + bIsLoading = + oReq.onload = ajaxLoad; + + if (sPage) { oPageInfo.ur + oReq.open("get", filterU + oReq.send(); + oLoadingBox.parent + } + + function requestPage (sURL) { + i + + getPage(sURL); + se { + /* Ajax navigation is n + location.assi + } + } + + function processLi + if (this.className === sAjaxClass + requestPage(this.href); + + } + return true; + } + + function init () { + oPageInfo.title = document.title; + for (var oLin + } + + const + + /* customizable constants */ + sTargetId = "ajax-cont + + /* not customizable + rSearch = /\?.*$/, r + oLoadingBox = + oPageInfo = { + title: null, + url: location.href + HTTPStatus = /* + 100: "Continue" + 101: "Swit + 102: "Proc + 200: "OK", + 201: "Created + 202: "Accepted", + 203: "Non-Author + 204: "No Content + 205: "Reset Cont + 206: "Partial Conte + 207: "Multi-Sta + 208: "Already R + 226: "IM Used", + 300: "Multipl + 301: "Moved P + 302: "Found", + 303: "See Other", + 304: "Not Modifi + 305: "Use Proxy" + 306: "Reserv + 307: "Tempor + 308: "Perman + 400: "Bad Request", + 401: "Unauthorize + 402: "Payment Req + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allow + 406: "Not Acce + 407: "Proxy Au + 408: "Reques + 409: "Confli + 410: "Gone", + 411: "Length Requi + 412: "Precondition + 413: "Request Enti + 414: "Request-URI + 415: "Unsupported + 416: "Requested Range N + 417: "Expectat + 422: "Unproces + 423: "Locked", + 424: "Failed Depen + 425: "Unassigned", + 426: "Upgrade Requ + 427: "Unassigned", + 428: "Precondition + 429: "Too Many Req + 430: "Unassigned", + 431: "Request Header + + + + 503: "Service Unavailab + 504: "Gateway Time + 505: "HTTP Version + 506: "Variant Also Negot + 507: "Insufficient St + 508: "Loop Detecte + 509: "Unassigne + 510: "Not Exten + 511: "Network Authentication Requ + }; + + var + + oReq, bIsLoadi + + oLoadingBox.id = "aja + oCover.onclick = abortReq; + oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function ( + bUpdateURL = false; + oPageInfo.title = oEvent.state.ti + oPageInfo. + + }; + + window.addEventListener + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })(); ``` -> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** +> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** -Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). +Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). ## Lire également diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md index c829ef21fa..c41c73ac24 100644 --- a/files/fr/web/api/history_api/index.md +++ b/files/fr/web/api/history_api/index.md @@ -54,7 +54,7 @@ Vous pouvez déterminer le nombre de pages de l'historique en accédant à la va var numberOfEntries = window.history.length; ``` -> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. +> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. ## Ajouter et modifier des entrées de l'historique @@ -62,7 +62,7 @@ var numberOfEntries = window.history.length; HTML5 a introduit les méthodes [history.pushState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()>) et [history.replaceState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()>), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement [onpopstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate). -L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). +L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). ### Exemple de la méthode pushState() @@ -75,7 +75,7 @@ history.pushState(stateObj, "page 2", "bar.html"); Cela va provoquer l'apparition dans la barre de navigation de http\://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de `bar.html` ni même le test d'existence de `bar.html`. -Supposons à présent que l'utilisateur accède à la page http\://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http\://mozilla.org/bar.html, et si vous lisez l'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. +Supposons à présent que l'utilisateur accède à la page http\://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http\://mozilla.org/bar.html, et si vous lisez l'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http\://mozilla.org/foo.html et le document va recevoir un autre événement `popstate`, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement `popstate`. @@ -92,7 +92,7 @@ Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer On peut assimiler l'appel à `pushState()` à l'affectation `window.location = "#foo"`, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais `pushState()` a quelques avantages : -- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. +- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. - Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter `window.location = "#foo";` crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas `#foo`. - Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte. @@ -137,7 +137,7 @@ Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation. ### Lire l'état courant -Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec `pushState()` ou `replaceState()`) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement onload , mais pas l'événement popstate. Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché. +Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec `pushState()` ou `replaceState()`) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement onload , mais pas l'événement popstate. Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché. Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement `popstate` en utilisant la propriété `history.state` comme ceci : diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md index 81c6ed2503..47a39ee34d 100644 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -14,13 +14,13 @@ Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peu En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés. -Pour rendre un autre élément HTML glissable, deux choses doivent être faites : +Pour rendre un autre élément HTML glissable, deux choses doivent être faites : - Définissez l'attribut `{{htmlattrxref("draggable")}}` à `true` sur l'élément que vous voulez rendre glissable. - Ajoutez un scrutateur sur l'événement `{{event("dragstart")}}` et définissez les données du glissement dans ce scrutateur. - {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment. -Voici un exemple qui permet à une section de contenu d'être glissée : +Voici un exemple qui permet à une section de contenu d'être glissée : <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"> Ce texte <strong>peut</strong> être glissé. @@ -44,7 +44,7 @@ Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilis Ce texte <strong>peut</strong> être glissé. </div> -Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas. +Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas. ## Donnée de glissement @@ -52,13 +52,13 @@ Tous les événements de glissement ont une propriété appelée [dataTransfer]( Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien. -La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements `dragenter` et `dragover` au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt. +La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements `dragenter` et `dragover` au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt. Les types MIME habituels sont [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) ou [image/jpeg](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image), mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur [cette page](/Fr/GlisserD%C3%A9poser/Types_de_glissement). Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text). La donnée n'en sera qu'une représentation sous la forme d'un texte. -Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : +Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : event.dataTransfer.setData("text/plain", "Texte à glisser"); @@ -89,7 +89,7 @@ Lorsqu'un glissement a lieu, une image translucide est générée à partir de l event.dataTransfer.setDragImage(image, xOffset, yOffset); -Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : +Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : function dragWithCustomImage(event) { @@ -121,7 +121,7 @@ Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au nive event.dataTransfer.effectAllowed = "copy"; -Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : +Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : - none - : Aucune opération permise @@ -183,15 +183,15 @@ Vous pouvez également définir une propriété [effectAllowed](/fr/GlisserD%C3% ## Retour d'information du dépôt -Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas. +Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas. -De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. +De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. .droparea:-moz-drag-over { border: 1px solid black; } -Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. +Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. For more complex visual effects, you can also perform other operations during the `dragenter` event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an [image](/en/XUL/image) or [separator](/en/XUL/separator) element for example, and simply insert it into the document during the `dragenter` event. diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md index 3fbbe9166e..1464203ab7 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/index.md @@ -56,7 +56,7 @@ Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs). -Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. +Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets. @@ -93,7 +93,7 @@ Voir [la page de référence sur l'attribut `draggable`](/fr/docs/Web/HTML/Globa Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut `type`) tel que `text/html`. -Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : +Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : ```js function dragstart_handler(ev) { diff --git a/files/fr/web/api/htmlbodyelement/index.md b/files/fr/web/api/htmlbodyelement/index.md index cc77e6c2b5..43e03fefd6 100644 --- a/files/fr/web/api/htmlbodyelement/index.md +++ b/files/fr/web/api/htmlbodyelement/index.md @@ -71,7 +71,7 @@ _Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hé | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML WHATWG')}} | Techniquement, les propriétés liées à l'événement, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onlanguagechange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, `onstorage` et `onunload`, ont été passées à {{domxref("WindowEventHandlers")}}, et `HTMLBodyElement` implémentant cette interface. | -| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5 W3C')}} | Les propriétés suivantes sont désormais obsolètes: `aLink`, `bgColor`, `background`, `link`, `text` Les propriétés suivantes ont été ajoutées:. `vLink`, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, et `onstorage`. | | {{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM2 HTML')}} | Ne change pas de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM1')}} | Définition initiale. | diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md index cb0d0fbc79..b0124d9055 100644 --- a/files/fr/web/api/htmlbrelement/index.md +++ b/files/fr/web/api/htmlbrelement/index.md @@ -16,7 +16,7 @@ _Hérite les propriétés de son parent : {{domxref("HTMLElement")}}._ | Nom | Type | Description | | -------------------------------- | -------------------------------- | ------------------------------------------------------ | -| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | +| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | ## Méthodes diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md index 06bf2eb44a..040bdace07 100644 --- a/files/fr/web/api/htmlbuttonelement/index.md +++ b/files/fr/web/api/htmlbuttonelement/index.md @@ -11,13 +11,13 @@ translation_of: Web/API/HTMLButtonElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLButtonElement`** fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton. +L'interface **`HTMLButtonElement`** fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton. {{InheritanceDiagram(600, 120)}} ## Propriétés -Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* +Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.accessKey")}} - : Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton. @@ -45,7 +45,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.name")}} - : Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide. - {{domxref("HTMLButtonElement.tabIndex")}} - - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . + - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . - {{domxref("HTMLButtonElement.type")}} - : : Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: @@ -62,7 +62,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.value")}} - : Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton. - {{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}} - - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . + - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . ## Les méthodes @@ -98,9 +98,9 @@ Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - mo | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | -| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | -| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | +| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | +| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | +| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM1')}} | . Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.md b/files/fr/web/api/htmlcanvaselement/getcontext/index.md index 3f61afbe7c..77920ac0c8 100644 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.md +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCanvasElement/getContext --- {{APIRef("Canvas API")}} -La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. +La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. ## Syntaxe @@ -21,18 +21,18 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - typeDeContexte - - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : + - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : - - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. - - `"webgl"` (ou `"experimental-webgl"`) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). - - "`webgl2`" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. - - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. + - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. + - `"webgl"` (ou `"experimental-webgl"`) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). + - "`webgl2`" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. + - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. - Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). + Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). - `attributsDeContexte` - - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : + - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : ```js canvas.getContext('webgl', @@ -54,28 +54,28 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - **`antialias`** : booléen indiquant si un anti-aliasing doit être effectué ou non. - **`premultipliedAlpha`** : booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié. - **`preserveDrawingBuffer`** : si la valeur est `true`, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur. - - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. + - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. ### Valeur retournée : Un {{domxref("RenderingContext")}}, qui est soit un -- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, -- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, -- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou -- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. +- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, +- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, +- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou +- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. -Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. +Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. ## Exemples -Étant donné l'élément {{HTMLElement("canvas")}} : +Étant donné l'élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : +vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : ```js var canvas = document.getElementById('canvas'); @@ -83,15 +83,15 @@ var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... } ``` -Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. +Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | +| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité navigateurs @@ -99,6 +99,6 @@ Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRe ## Voir aussi -- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. +- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. - {{domxref("OffscreenCanvas.getContext()")}}. -- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. +- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. diff --git a/files/fr/web/api/htmlcanvaselement/height/index.md b/files/fr/web/api/htmlcanvaselement/height/index.md index 647a45f107..342329cc6b 100644 --- a/files/fr/web/api/htmlcanvaselement/height/index.md +++ b/files/fr/web/api/htmlcanvaselement/height/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/HTMLCanvasElement/height --- {{APIRef("Canvas API")}} -La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée. +La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée. -C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. +C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. ## Syntaxe @@ -21,13 +21,13 @@ C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir la hauteur du canevas avec le code suivant : +vous pouvez obtenir la hauteur du canevas avec le code suivant : ```js var canvas = document.getElementById('canvas'); @@ -39,7 +39,7 @@ console.log(canvas.height); // 300 | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcollection/index.md b/files/fr/web/api/htmlcollection/index.md index 94d2f75eba..d2e9197464 100644 --- a/files/fr/web/api/htmlcollection/index.md +++ b/files/fr/web/api/htmlcollection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCollection L'interface **HTMLCollection** est constituée d'une collection générique (à la manière d'un tableau similaire à [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste. -**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). +**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change. @@ -25,11 +25,11 @@ Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le do - {{domxref("HTMLCollection.item()")}} - : Retourne le nœud spécifique à l'`index` basé sur zéro donné dans la liste. Retourne `null` si l'`index` est hors de portée. - {{domxref("HTMLCollection.namedItem()")}} - - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. + - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. ## Utilisation en JavaScript -`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. +`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. Par exemple, en supposant qu'il y ait un élément `<form>` _(formulaire)_ dans le document et que son `id` soit `"myForm"` : @@ -59,8 +59,8 @@ Certains navigateurs se comportent différemment quand il y a plus d'un élémen | Specification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | +| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | | {{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/htmlcollection/item/index.md b/files/fr/web/api/htmlcollection/item/index.md index d1c5d2cea5..c25813184e 100644 --- a/files/fr/web/api/htmlcollection/item/index.md +++ b/files/fr/web/api/htmlcollection/item/index.md @@ -18,7 +18,7 @@ L'élement à la position spécifiée, ou null si la position est inférieure à ## Description -La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. +La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. ## Exemple diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md index c34b0e1a69..d1945bbed0 100644 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/HTMLContentElement/getDistributedNodes --- {{ APIRef("Web Components") }} -La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. +La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Syntaxe @@ -27,7 +27,7 @@ var nodes = myContentObject.getDistributedNodes(); | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/index.md b/files/fr/web/api/htmlcontentelement/index.md index 51df4a127b..d03ca6a742 100644 --- a/files/fr/web/api/htmlcontentelement/index.md +++ b/files/fr/web/api/htmlcontentelement/index.md @@ -11,27 +11,27 @@ translation_of: Web/API/HTMLContentElement --- {{ APIRef("Web Components") }} -L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). +L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). ## Propriétés -_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ +_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.select")}} - - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. + - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Méthodes -_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ +_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.getDistributedNodes()")}} - - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. + - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/select/index.md b/files/fr/web/api/htmlcontentelement/select/index.md index c639c24316..a11d49dfa0 100644 --- a/files/fr/web/api/htmlcontentelement/select/index.md +++ b/files/fr/web/api/htmlcontentelement/select/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLContentElement/select --- {{ APIRef("Web Components") }} -La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. +La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Syntaxe @@ -28,7 +28,7 @@ myContentObject.select = "h1 .error"; | Specification | Status | Comment | | -------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmldocument/index.md b/files/fr/web/api/htmldocument/index.md index e9f6331602..45ef36b0b8 100644 --- a/files/fr/web/api/htmldocument/index.md +++ b/files/fr/web/api/htmldocument/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLDocument --- {{ APIRef("HTML DOM") }} -**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML). +**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML). -Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus. +Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus. ## Spécification diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md index d73b519dbd..c8ef315786 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.md +++ b/files/fr/web/api/htmlelement/accesskey/index.md @@ -14,6 +14,6 @@ original_slug: Web/API/Element/accessKey --- {{APIRef("DOM")}} -La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. +La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. -> **Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey). +> **Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey). diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index b37e99d8f3..cd699a2379 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -82,4 +82,4 @@ function updateValue(e) { ## Voir aussi -- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) +- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index a3bd13be95..540f203276 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -33,7 +33,7 @@ L'événement **change** est déclenché pour les éléments {{HTMLElement("inpu En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent : - Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`_(case à cocher_). -- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). +- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). - Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou `<input type="text">`). Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du \<select> (voir {{bug("126379")}}). diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md index 9bd9f6704c..c4572a76d6 100644 --- a/files/fr/web/api/htmlelement/click/index.md +++ b/files/fr/web/api/htmlelement/click/index.md @@ -44,7 +44,7 @@ D'autres implémentations du DOM peuvent se comporter différemment. | Spécification | Statut | Commentaires | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md index e90cf402d7..10b57f9664 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.md +++ b/files/fr/web/api/htmlelement/contenteditable/index.md @@ -14,8 +14,8 @@ translation_of: Web/API/HTMLElement/contentEditable La propriété **`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs : - `"true"` _(vrai)_ indique que l'élément est éditable. -- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. -- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. +- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. +- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}. diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md index 5cfee0d797..e6aba0d240 100644 --- a/files/fr/web/api/htmlelement/dir/index.md +++ b/files/fr/web/api/htmlelement/dir/index.md @@ -33,11 +33,11 @@ para.dir = "rtl"; ## Notes -La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche). +La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche). -Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. +Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. -Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. +Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. {{ gecko_callout_heading("7.0") }} @@ -47,4 +47,4 @@ Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renv | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 6c2121924c..1937f8240a 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -42,8 +42,8 @@ Voici un exemple où un bloc caché est utilisé pour contenir un message de rem ```js document.getElementById("boutonOk") .addEventListener("click", function() { - document.getElementById("bienvenue").hidden = true; - document.getElementById("impressionnant").hidden = false; + document.getElementById("bienvenue").hidden = true; + document.getElementById("impressionnant").hidden = false; }, false); ``` diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md index 77f521cae9..2a4ebc18d0 100644 --- a/files/fr/web/api/htmlelement/index.md +++ b/files/fr/web/api/htmlelement/index.md @@ -19,10 +19,10 @@ translation_of: Web/API/HTMLElement | {{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | La touche de navigation clavier assignée à l'élément. | | {{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | Une chaîne de caractères définissant la touche de navigation clavier assignée. | | {{domxref("element.className", "className")}} | {{domxref("DOMString")}} | Le nom de la classe [CSS](/fr/docs/CSS) définie pour l'élément. | -| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | +| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | | {{domxref("element.dir", "dir")}} | {{domxref("DOMString")}} | L'attribut `dir` de l'élément. | | {{domxref("element.id", "id")}} | {{domxref("DOMString")}} | L'ID de l'élément. | -| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | +| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | | {{domxref("element.title", "title")}} | {{domxref("DOMString")}} | L'attribut `title` de l'élément. | ## Méthodes @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLElement | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md index 3f639cd672..9749e10c9e 100644 --- a/files/fr/web/api/htmlelement/innertext/index.md +++ b/files/fr/web/api/htmlelement/innertext/index.md @@ -8,7 +8,7 @@ original_slug: Web/API/Node/innerText ## Sommaire -**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. +**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. {{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux. diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md index d70e1d9447..41eee8858b 100644 --- a/files/fr/web/api/htmlelement/input_event/index.md +++ b/files/fr/web/api/htmlelement/input_event/index.md @@ -8,9 +8,9 @@ tags: - HTML5 translation_of: Web/API/HTMLElement/input_event --- -L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). +L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). -De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) . +De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) . ## Information générale diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 65b63c9c97..92aa4fc4ca 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -40,7 +40,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de la dernière image, {{SpecName('HTML5.1')}} | | {{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5.1')}} | L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | +| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md index 3d17dce396..980247a301 100644 --- a/files/fr/web/api/htmlelement/lang/index.md +++ b/files/fr/web/api/htmlelement/lang/index.md @@ -35,7 +35,7 @@ if (document.documentElement.lang === "en") { ## Notes -Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document. +Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document. Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. @@ -43,4 +43,4 @@ Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md index 9ea5546329..794d246dc8 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.md +++ b/files/fr/web/api/htmlelement/offsetheight/index.md @@ -35,7 +35,7 @@ L'exemple d'image ci-avant montre une barre de défilement et un décalage `offs ### Notes -`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte). +`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte). ### Références diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md index 7aab29ee95..b0f7aff57a 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.md +++ b/files/fr/web/api/htmlelement/offsetleft/index.md @@ -21,7 +21,7 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare ### Note -`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. +`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. ### Exemple @@ -29,16 +29,16 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare var tOLeft = colorTable.offsetLeft; if (tOLeft > 5) { - // grand décalage à gauche : faire quelque chose ici + // grand décalage à gauche : faire quelque chose ici } ### Exemple -Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span. +Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.  -Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki. +Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki. ```html <div style="width: 300px; border-color:blue; diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md index 93a25485bf..71a075b8ac 100644 --- a/files/fr/web/api/htmlelement/offsetparent/index.md +++ b/files/fr/web/api/htmlelement/offsetparent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLElement/offsetParent ### Résumé -Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**. +Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**. ### Syntaxe diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md index 66bde2526f..f5a6b3f465 100644 --- a/files/fr/web/api/htmlelement/offsetwidth/index.md +++ b/files/fr/web/api/htmlelement/offsetwidth/index.md @@ -29,7 +29,7 @@ Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures d ### Notes -`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte). +`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte). ### Références diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md index fc7fe6a2eb..f52e7b5ca7 100644 --- a/files/fr/web/api/htmlelement/outertext/index.md +++ b/files/fr/web/api/htmlelement/outertext/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLElement/outerText ## Résumé -**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. +**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. ## Exemple diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md index 4746016d01..ea06935e79 100644 --- a/files/fr/web/api/htmlelement/title/index.md +++ b/files/fr/web/api/htmlelement/title/index.md @@ -36,7 +36,7 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', '#dom-title', 'title')}} | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs @@ -45,4 +45,4 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t ## Voir aussi -- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). +- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md index 2ab87e6a9e..30a0e624fa 100644 --- a/files/fr/web/api/htmlelement/transitionend_event/index.md +++ b/files/fr/web/api/htmlelement/transitionend_event/index.md @@ -38,7 +38,7 @@ L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/e </tbody> </table> -L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. +L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. ## Propriétés @@ -118,7 +118,7 @@ el.addEventListener('transitioncancel', function() { }); el.addEventListener('transitionend', function() { - message.textContent = 'transitionend fired'; + message.textContent = 'transitionend fired'; }); ``` diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.md b/files/fr/web/api/htmlformelement/acceptcharset/index.md index 57663cfbef..3ff909eb93 100644 --- a/files/fr/web/api/htmlformelement/acceptcharset/index.md +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLFormElement/acceptCharset --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.acceptCharset`** représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces. +La propriété **`HTMLFormElement.acceptCharset`** représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces. ## Syntaxe @@ -20,6 +20,6 @@ La propriété **`HTMLFormElement.acceptCharset`** représente une liste des co ## Spécification -[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) +[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) [DOM Level 2 HTML: acceptCharset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795) diff --git a/files/fr/web/api/htmlformelement/action/index.md b/files/fr/web/api/htmlformelement/action/index.md index 612ca4a371..84b6bb9ba4 100644 --- a/files/fr/web/api/htmlformelement/action/index.md +++ b/files/fr/web/api/htmlformelement/action/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/action --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie. diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md index 917df92fce..582fe668d5 100644 --- a/files/fr/web/api/htmlformelement/elements/index.md +++ b/files/fr/web/api/htmlformelement/elements/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/elements --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. +La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. Vous pouvez accéder à un élément particulier en utilisant soit un index soit le `name` ou l'`id` de l'élément. diff --git a/files/fr/web/api/htmlformelement/encoding/index.md b/files/fr/web/api/htmlformelement/encoding/index.md index a148520e2d..6ea6cc9a55 100644 --- a/files/fr/web/api/htmlformelement/encoding/index.md +++ b/files/fr/web/api/htmlformelement/encoding/index.md @@ -5,4 +5,4 @@ translation_of: Web/API/HTMLFormElement/encoding --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. +La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. diff --git a/files/fr/web/api/htmlformelement/enctype/index.md b/files/fr/web/api/htmlformelement/enctype/index.md index 71107a5efa..9215596bc7 100644 --- a/files/fr/web/api/htmlformelement/enctype/index.md +++ b/files/fr/web/api/htmlformelement/enctype/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/enctype --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. -Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". +Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/index.md b/files/fr/web/api/htmlformelement/index.md index 8850ffaf60..3ed96ee05c 100644 --- a/files/fr/web/api/htmlformelement/index.md +++ b/files/fr/web/api/htmlformelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLFormElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. +L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. {{InheritanceDiagram(600,120)}} @@ -62,7 +62,7 @@ _Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElemen ### Obtention d'un objet élément de formulaire -Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}. +Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}. {{domxref("Document.forms")}} renvoie un tableau des objets `HTMLFormElement` listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel : @@ -79,7 +79,7 @@ Vous pouvez accéder à la liste des éléments contenant des données dans le f ### Éléments considérés comme des contrôles de formulaire -Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : +Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : - {{HTMLElement("button")}} (_bouton_) - {{HTMLElement("fieldset")}} (*champ*s) diff --git a/files/fr/web/api/htmlformelement/length/index.md b/files/fr/web/api/htmlformelement/length/index.md index 1f497f191c..4cee034019 100644 --- a/files/fr/web/api/htmlformelement/length/index.md +++ b/files/fr/web/api/htmlformelement/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/length --- {{APIRef("HTML DOM")}} -La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. +La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/method/index.md b/files/fr/web/api/htmlformelement/method/index.md index 43eaa9c50a..7f253d80e2 100644 --- a/files/fr/web/api/htmlformelement/method/index.md +++ b/files/fr/web/api/htmlformelement/method/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/method --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. +La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/name/index.md b/files/fr/web/api/htmlformelement/name/index.md index 3256e5be65..508b688a9f 100644 --- a/files/fr/web/api/htmlformelement/name/index.md +++ b/files/fr/web/api/htmlformelement/name/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/name --- {{APIRef("HTML DOM")}} -La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. +La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. -Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec `createElement()` à partir de la propriété `name`. +Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec `createElement()` à partir de la propriété `name`. ## Syntaxe @@ -19,12 +19,12 @@ Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ```js var form1name = document.getElementById("form1").name; -if (form1name != document.form.form1) { +if (form1name != document.form.form1) { // browser doesn't support this form of reference } ``` ## Spécification -- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) +- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) - [DOM Level 2 HTML: name](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454) diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.md b/files/fr/web/api/htmlformelement/reportvalidity/index.md index d54f17148d..73a936beec 100644 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.md +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/HTMLFormElement/reportValidity --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . +La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . ## Syntax @@ -34,7 +34,7 @@ document.forms['myform'].addEventListener('submit', function() { | Specification | Status | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlformelement/submit/index.md b/files/fr/web/api/htmlformelement/submit/index.md index 2630092001..64feae672e 100644 --- a/files/fr/web/api/htmlformelement/submit/index.md +++ b/files/fr/web/api/htmlformelement/submit/index.md @@ -9,15 +9,15 @@ translation_of: Web/API/HTMLFormElement/submit --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné +La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant: - Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire -- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . +- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . - [Constraint validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) n'est pas déclenché . -Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. +Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. ## Syntax diff --git a/files/fr/web/api/htmlformelement/target/index.md b/files/fr/web/api/htmlformelement/target/index.md index b5c5dcc6c7..e1c63b2d5e 100644 --- a/files/fr/web/api/htmlformelement/target/index.md +++ b/files/fr/web/api/htmlformelement/target/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/target --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). +La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). ## Syntaxe diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.md b/files/fr/web/api/htmliframeelement/contentdocument/index.md index 178b02027f..6dadd42b5d 100644 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.md +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.md @@ -4,7 +4,7 @@ slug: Web/API/HTMLIFrameElement/contentDocument translation_of: HTMLIFrameElement.contentDocument browser-compat: api.HTMLIFrameElement.contentDocument --- -Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. +Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. ## Exemples diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md index 07b28b66bc..5b651f7ceb 100644 --- a/files/fr/web/api/htmlimageelement/index.md +++ b/files/fr/web/api/htmlimageelement/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/HTMLImageElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . +L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . ## Propriétés _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.align")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ - {{domxref("HTMLImageElement.alt")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image. - {{domxref("HTMLImageElement.border")}} {{obsolete_inline}} @@ -22,7 +22,7 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.crossOrigin")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ représentant le paramètre CORS défini pour cet élément image. Voir [Attributs de règlage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus de détails. - {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). + - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). - {{domxref("HTMLImageElement.height")}} - : Est un `unsigned long` _(non signé long)_ qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS. - {{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}} @@ -30,29 +30,29 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.isMap")}} - : Est un {{domxref("Boolean")}} _(booléen)_ qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur. - {{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. - {{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. - {{domxref("HTMLImageElement.name")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. - {{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}} - - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. + - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. - {{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. - {{domxref("HTMLImageElement.src")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. - {{domxref("HTMLImageElement.sizes")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. - {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. - {{domxref("HTMLImageElement.useMap")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. - {{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}} - : Est un `long` représentant l'espace au-dessus et en-dessous de l'image. - {{domxref("HTMLImageElement.width")}} - : Est un `unsigned long` qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS. - {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. + - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. - {{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}} - : Retourne un `long` représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. @@ -61,16 +61,16 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ _Hérite les propriétés de son parent, {{domxref("HTMLElement")}}._ - {{domxref("HTMLImageElement.Image()", "Image()")}} - - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long` , qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. + - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long`, qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. ## Erreurs Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris : -- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. -- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. +- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. +- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. - L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée. -- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. +- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. - L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}". ## Exemple diff --git a/files/fr/web/api/htmlinputelement/index.md b/files/fr/web/api/htmlinputelement/index.md index 7240d27edb..91f36c0bbc 100644 --- a/files/fr/web/api/htmlinputelement/index.md +++ b/files/fr/web/api/htmlinputelement/index.md @@ -571,7 +571,7 @@ The **`HTMLInputElement`** interface provides special properties and methods for <code><em>string</em></code ><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works - with<strong> </strong>{{htmlattrxref("min","input")}} and + with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.md b/files/fr/web/api/htmlmediaelement/abort_event/index.md index 77cf2c3790..b54fec6b1b 100644 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.md +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event --- {{APIRef}} -L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. +L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. <table class="properties"> <tbody> diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.md b/files/fr/web/api/htmlmediaelement/canplay_event/index.md index 3c40a18ea7..cea254a75b 100644 --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.md +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.md @@ -3,7 +3,7 @@ title: 'HTMLMediaElement: canplay' slug: Web/API/HTMLMediaElement/canplay_event translation_of: Web/API/HTMLMediaElement/canplay_event --- -L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). +L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). ## Informations Générales diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.md b/files/fr/web/api/htmlmediaelement/capturestream/index.md index 73ef52ce23..f5ac60456a 100644 --- a/files/fr/web/api/htmlmediaelement/capturestream/index.md +++ b/files/fr/web/api/htmlmediaelement/capturestream/index.md @@ -38,7 +38,7 @@ Dans cet exemple, un écouteur d'événement est mise en place, permettant la ca document.querySelector('.playAndRecord').addEventListener('click', function() { var playbackElement = document.getElementById("playback"); var captureStream = playbackElement.captureStream(); - playbackElement.play(); + playbackElement.play(); }); ``` @@ -56,12 +56,12 @@ Voir [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/R ### Firefox-notes spécifiques -Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. +Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. Cependant, `captureStream()` reste préfixé `mozCaptureStream()` sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées : - Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}. -- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. +- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. - Repasser la source en `MediaStream` ajoute des pistes au flux et fonctionne de nouveau comme prévu. - L'appel à `mozCaptureMediaStream()` sur un élément avec une source `MediaStream` retourne un flux qui contient uniquement les pistes jouées par un `MediaStream`. - Si vous appellez `mozCaptureMediaStream()` sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un `MediaStream`, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment. diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md index ae4bf10a8b..fa8b25d7e2 100644 --- a/files/fr/web/api/htmlmediaelement/index.md +++ b/files/fr/web/api/htmlmediaelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. +L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. ## Propriétés @@ -45,7 +45,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.defaultPlaybackRate")}} - : est un `double` indiquant le taux de lecture par défaut pour le média. - {{domxref("HTMLMediaElement.disableRemotePlayback")}} - - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. + - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. - {{domxref("HTMLMediaElement.duration")}}{{readonlyinline}} - : renvoie un `double` indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible. - {{domxref("HTMLMediaElement.ended")}}{{readonlyinline}} @@ -55,25 +55,25 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.loop")}} - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (_boucle_), lequel indique si l'élément média doit recommencer quand il arrive à la fin. - {{domxref("HTMLMediaElement.mediaGroup")}} - - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. + - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. - {{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}} - - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. + - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. - {{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}} - - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. + - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. - {{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}} - : est un `double` qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour `currentSrc`, sinon il est égal à la durée du média. -- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} - : est un `unsigned long` qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement `MozAudioAvailable`. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux \* 1024 (c'est-à-dire, 2 canaux \* 1024 échantillons = total 2048). La propriété `mozFrameBufferLength` peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée _doit_ être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement [loadedmetadata](/en-US/docs/Web/Events/loadedmetadata), lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements `MozAudioAvailable` aient commencé à se déclencher. -- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. +- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} + - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. - {{domxref("HTMLMediaElement.muted")}} - : est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. `true` (_vrai_) si l'audio est coupé et `false` (_faux_) sinon. - {{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}} - - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. + - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. - {{domxref("HTMLMediaElement.paused")}}{{readonlyinline}} - : renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause. - {{domxref("HTMLMediaElement.playbackRate")}} @@ -85,7 +85,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} - : est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à `false` (_faux_), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (`mozPreservesPitch`) et WebKit (`webkitPreservesPitch`). - {{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}} - - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. + - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. - {{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}} - : Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant. - {{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}} @@ -120,7 +120,7 @@ Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un na - {{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}} - : renvoie un `double` qui indique la position de lecture initiale en secondes. -- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - : renvoie un `double` représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo). ### Gestionnaires d'évènements obsolètes @@ -137,7 +137,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle - {{domxref("HTMLMediaElement.addTextTrack()")}} - : Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média. - {{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}} - - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. + - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. - {{domxref("HTMLMediaElement.canPlayType()")}} - : Détermine si le type de média spécifié peut être lu. - {{domxref("HTMLMediaElement.fastSeek()")}} @@ -166,7 +166,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge. - {{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}} - - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. + - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. ## Spécifications diff --git a/files/fr/web/api/htmlmediaelement/play/index.md b/files/fr/web/api/htmlmediaelement/play/index.md index 5ec797381e..82eb34932b 100644 --- a/files/fr/web/api/htmlmediaelement/play/index.md +++ b/files/fr/web/api/htmlmediaelement/play/index.md @@ -13,9 +13,9 @@ tags: - play translation_of: Web/API/HTMLMediaElement/play --- -{{APIRef("HTML DOM")}} {{SeeCompatTable}} +{{APIRef("HTML DOM")}} {{SeeCompatTable}} -La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). +La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). ## Syntaxe @@ -31,7 +31,7 @@ Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou reje ### Exceptions -Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : +Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : - `NotAllowedError` - : Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play". @@ -42,7 +42,7 @@ D'autres types d'exceptions peuvent survenir selon l'implémentation du navigate ## Exemple -Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. +Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. ```js let myVideo = document.getElementById("myVideoElement"); @@ -61,7 +61,7 @@ myVideo.play().then(() => { | {{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}} | {{Spec2('HTML WHATWG')}} | Définition initiale; living specification. | | {{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | -> **Note :** Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout. +> **Note :** Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlmediaelement/volume/index.md b/files/fr/web/api/htmlmediaelement/volume/index.md index 9f33840d7c..cf56cbe123 100644 --- a/files/fr/web/api/htmlmediaelement/volume/index.md +++ b/files/fr/web/api/htmlmediaelement/volume/index.md @@ -18,7 +18,7 @@ La propriété **`HTMLMediaElement.volume`** définit le volume auquel le média ## Syntaxe - var volume = video.volume; //1 + var volume = video.volume; //1 ### Valeur diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md index eb93cdf43a..37e86d54aa 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.md +++ b/files/fr/web/api/htmlselectelement/remove/index.md @@ -46,9 +46,9 @@ sel.remove(1); | Spécification | Status | Comment | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ | -| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML5 W3C')}} | Is a snapshot of {{SpecName("HTML WHATWG")}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | | {{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM1')}} | Initial definition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md index fb449d6b3e..be5650ae33 100644 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLSelectElement/setCustomValidity --- {{ APIRef("HTML DOM") }} -La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. +La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. ## Syntaxe @@ -15,7 +15,7 @@ ElmSelectionne.setCustomValidity(message); ### Paramètres -- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. +- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. ## Spécifications diff --git a/files/fr/web/api/htmlstyleelement/index.md b/files/fr/web/api/htmlstyleelement/index.md index 87e7e4d49b..b4b983a1d0 100644 --- a/files/fr/web/api/htmlstyleelement/index.md +++ b/files/fr/web/api/htmlstyleelement/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLStyleElement ### Notes -Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : +Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : - [L'objet DOM element.style](fr/DOM/element.style) - [L'objet DOM stylesheet](fr/DOM/stylesheet) @@ -35,7 +35,7 @@ ou directement sur cet élément à l'aide de `element.style.propertyName` (par De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété `border` écrasera les réglages définis ailleurs pour la propriété `border` de cet élément dans la section `head` du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme `padding`, `margin` ou `font` par exemple. -Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : +Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : ```html <html> @@ -82,7 +82,7 @@ L'objet `style` représente une règle de style individuelle. Contrairement aux _in-line_ d'un élément particulier. -Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : +Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> @@ -109,7 +109,7 @@ Les attributs **media** et **type** du style peuvent être donnés ou non. Notez var el = document.getElementById("un-element"); el.setAttribute("style", "background-color:darkblue;"); -Soyez cependant conscient que `setAttribute` écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. +Soyez cependant conscient que `setAttribute` écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. ##### Propriétés diff --git a/files/fr/web/api/htmltablecellelement/index.md b/files/fr/web/api/htmltablecellelement/index.md index 5e7f4bded8..e82e644cf5 100644 --- a/files/fr/web/api/htmltablecellelement/index.md +++ b/files/fr/web/api/htmltablecellelement/index.md @@ -62,4 +62,4 @@ _Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("H ## Voir aussi -- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. +- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. diff --git a/files/fr/web/api/htmltableelement/caption/index.md b/files/fr/web/api/htmltableelement/caption/index.md index 68308f7596..4978f7502b 100644 --- a/files/fr/web/api/htmltableelement/caption/index.md +++ b/files/fr/web/api/htmltableelement/caption/index.md @@ -27,5 +27,5 @@ Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau. ### Spécification -- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) +- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) - [Interface HTMLTableCaptionElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137)) diff --git a/files/fr/web/api/htmltableelement/insertrow/index.md b/files/fr/web/api/htmltableelement/insertrow/index.md index 6309720d21..4850f07779 100644 --- a/files/fr/web/api/htmltableelement/insertrow/index.md +++ b/files/fr/web/api/htmltableelement/insertrow/index.md @@ -12,16 +12,16 @@ translation_of: Web/API/HTMLTableElement/insertRow --- {{APIRef("HTML DOM")}} -La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. +La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. ## Syntaxe var ligne = HTMLTableElement.insertRow(optionnel indice = -1); - [`HTMLTableElement`](/en-US/docs/DOM/HTMLTableElement) est une référence à un élément table HTML. -- `indice` est l'indice de ligne de la nouvelle ligne. -- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut. -- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : +- `indice` est l'indice de ligne de la nouvelle ligne. +- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut. +- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : ` var tbody_particulier``=document.getElementById(id_tbody); var ligne=tbody_particulier.``insertRow(indice) ` ## Exemple @@ -57,13 +57,13 @@ ajouteLigne('TableA'); Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD. -Remarquez que `insertRow` insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. +Remarquez que `insertRow` insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM2 HTML")}} | Spécifie plus en détail où la ligne est insérée. | | {{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM1")}} | Définition initiale. | diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 4d9f632f14..015f1e77b5 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -70,7 +70,7 @@ addRow('my-table'); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -80,4 +80,4 @@ addRow('my-table'); ## Voir aussi - {{domxref("HTMLTableElement.insertRow()")}} -- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} +- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} diff --git a/files/fr/web/api/htmlunknownelement/index.md b/files/fr/web/api/htmlunknownelement/index.md index 5d240fe885..a3eeda7dfa 100644 --- a/files/fr/web/api/htmlunknownelement/index.md +++ b/files/fr/web/api/htmlunknownelement/index.md @@ -11,11 +11,11 @@ L’interface **`HTMLUnknownElement`** représente un élément HTML invalide et ## Propriétés -_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ ## Méthodes -_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ ## Spécifications @@ -30,5 +30,5 @@ _Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef( ## Voir aussi -- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} +- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} - {{DOMxRef("SVGUnknownElement")}} diff --git a/files/fr/web/api/idbcursor/advance/index.md b/files/fr/web/api/idbcursor/advance/index.md index 6b56ff6a70..b3f7f674f9 100644 --- a/files/fr/web/api/idbcursor/advance/index.md +++ b/files/fr/web/api/idbcursor/advance/index.md @@ -31,7 +31,7 @@ Aucune. ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : | Exception | Description | | -------------------------- | ---------------------------------------------------------------- | @@ -43,7 +43,7 @@ Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise `cursor.advance(2)` pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. `advance()`fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant. -On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). +On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). ```js function advanceResult() { @@ -69,7 +69,7 @@ function advanceResult() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/continue/index.md b/files/fr/web/api/idbcursor/continue/index.md index 7792e063da..53d6c951b2 100644 --- a/files/fr/web/api/idbcursor/continue/index.md +++ b/files/fr/web/api/idbcursor/continue/index.md @@ -27,7 +27,7 @@ curseur.continue(cléOptionnelle); ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : <table class="standard-table"> <thead> @@ -95,7 +95,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md index d471c41de2..cb9e8f7bf8 100644 --- a/files/fr/web/api/idbcursor/index.md +++ b/files/fr/web/api/idbcursor/index.md @@ -132,7 +132,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/close/index.md b/files/fr/web/api/idbdatabase/close/index.md index 4da6941350..a77ce80dd0 100644 --- a/files/fr/web/api/idbdatabase/close/index.md +++ b/files/fr/web/api/idbdatabase/close/index.md @@ -54,7 +54,7 @@ Aucune. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.md b/files/fr/web/api/idbdatabase/createobjectstore/index.md index a829b7c64a..39725c8b93 100644 --- a/files/fr/web/api/idbdatabase/createobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/createobjectstore/index.md @@ -97,7 +97,7 @@ var objectStore = db.createObjectStore(name, optionalParameters); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md index d3d72f60ca..5941d6e4fe 100644 --- a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md @@ -37,7 +37,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suiv | Exception | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | +| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | | `TransactionInactiveError` | Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur `InvalidStateError`, cela est désormais corrigé (cf. {{bug("1176165")}}). | | `NotFoundError` | Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse. | @@ -88,8 +88,8 @@ Dans cet exemple, on ouvre une connexion à la base de données et dans le gesti | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md index 99239a0809..45a82a7906 100644 --- a/files/fr/web/api/idbdatabase/index.md +++ b/files/fr/web/api/idbdatabase/index.md @@ -119,7 +119,7 @@ var objectStore = db.transaction('toDoList').objectStore('toDoList'); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md index eb40259dab..1ec782aecc 100644 --- a/files/fr/web/api/idbdatabase/name/index.md +++ b/files/fr/web/api/idbdatabase/name/index.md @@ -58,7 +58,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md index 5f96dfbd4d..055de5f183 100644 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.md +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBDatabase/objectStoreNames --- {{APIRef("IndexedDB")}} -La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. +La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. {{AvailableInWorkers}} @@ -55,7 +55,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md index a58db4d79d..10b1a6393d 100644 --- a/files/fr/web/api/idbdatabase/transaction/index.md +++ b/files/fr/web/api/idbdatabase/transaction/index.md @@ -176,7 +176,7 @@ var objectStore = transaction.objectStore("toDoList"); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/version/index.md b/files/fr/web/api/idbdatabase/version/index.md index 33c35d6c53..61200af313 100644 --- a/files/fr/web/api/idbdatabase/version/index.md +++ b/files/fr/web/api/idbdatabase/version/index.md @@ -49,7 +49,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/versionchange_event/index.md b/files/fr/web/api/idbdatabase/versionchange_event/index.md index 2476f4062d..072580f10d 100644 --- a/files/fr/web/api/idbdatabase/versionchange_event/index.md +++ b/files/fr/web/api/idbdatabase/versionchange_event/index.md @@ -65,7 +65,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbenvironment/index.md b/files/fr/web/api/idbenvironment/index.md index 9630e9b598..494e3949c8 100644 --- a/files/fr/web/api/idbenvironment/index.md +++ b/files/fr/web/api/idbenvironment/index.md @@ -39,7 +39,7 @@ function openDB() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md index 0ce4678d23..552a7a02bc 100644 --- a/files/fr/web/api/idbfactory/cmp/index.md +++ b/files/fr/web/api/idbfactory/cmp/index.md @@ -59,7 +59,7 @@ console.log( "Résultat de la comparaison : " + result ); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.md b/files/fr/web/api/idbfactory/deletedatabase/index.md index 45b1745eb8..8636c522f7 100644 --- a/files/fr/web/api/idbfactory/deletedatabase/index.md +++ b/files/fr/web/api/idbfactory/deletedatabase/index.md @@ -59,8 +59,8 @@ DBDeleteRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/index.md b/files/fr/web/api/idbfactory/index.md index fbcba34c21..5695a27aeb 100644 --- a/files/fr/web/api/idbfactory/index.md +++ b/files/fr/web/api/idbfactory/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/IDBFactory --- {{APIRef("IndexedDB")}} -L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. +L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md index 04d42ffe9c..b6e628b5e0 100644 --- a/files/fr/web/api/idbfactory/open/index.md +++ b/files/fr/web/api/idbfactory/open/index.md @@ -23,7 +23,7 @@ Cette méthode peut également émettre les évènements `upgradeneeded`, `block ## Syntaxe -La syntaxe standard est la suivante : +La syntaxe standard est la suivante : var IDBOpenDBRequest = indexedDB.open(nom); var IDBOpenDBRequest = indexedDB.open(nom, version); @@ -51,7 +51,7 @@ Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les diffé ### Exceptions -Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : +Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : | Exception | Description | | ----------- | -------------------------------------------------------------------------- | @@ -59,7 +59,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : ## Exemples -Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : +Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : ```js var request = window.indexedDB.open("toDoList", 4); @@ -101,8 +101,8 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs @@ -111,9 +111,9 @@ DBOpenRequest.onsuccess = function(event) { ## Voir aussi - [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB) -- Démarrer des transactions : {{domxref("IDBDatabase")}} -- Manipuler des transactions : {{domxref("IDBTransaction")}} -- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} -- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} -- Manipuler des curseurs : {{domxref("IDBCursor")}} -- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) +- Démarrer des transactions : {{domxref("IDBDatabase")}} +- Manipuler des transactions : {{domxref("IDBTransaction")}} +- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} +- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} +- Manipuler des curseurs : {{domxref("IDBCursor")}} +- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) diff --git a/files/fr/web/api/idbindex/count/index.md b/files/fr/web/api/idbindex/count/index.md index 67259dd4f7..d394b8ef10 100644 --- a/files/fr/web/api/idbindex/count/index.md +++ b/files/fr/web/api/idbindex/count/index.md @@ -104,8 +104,8 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md index 0fa82fd05a..5402f8cc03 100644 --- a/files/fr/web/api/idbindex/get/index.md +++ b/files/fr/web/api/idbindex/get/index.md @@ -28,11 +28,11 @@ var request = myIndex.get(key); ## Exceptions - `TransactionInactiveError` - - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. + - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. - `DataError` - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. ## Exemple @@ -89,7 +89,7 @@ function displayDataByIndex() { | Spécification | Ètat | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbindex/getall/index.md b/files/fr/web/api/idbindex/getall/index.md index caa5d1d798..0b71852bc8 100644 --- a/files/fr/web/api/idbindex/getall/index.md +++ b/files/fr/web/api/idbindex/getall/index.md @@ -38,7 +38,7 @@ On peut comparer cette méthode avec une recherche par curseur. Effectivement, i - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive. - `DataError` - - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. + - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. - `TypeError` diff --git a/files/fr/web/api/idbindex/getkey/index.md b/files/fr/web/api/idbindex/getkey/index.md index 0ca4b1cc15..cc08a06d61 100644 --- a/files/fr/web/api/idbindex/getkey/index.md +++ b/files/fr/web/api/idbindex/getkey/index.md @@ -112,7 +112,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md index 13379463fa..4fb79c0925 100644 --- a/files/fr/web/api/idbindex/keypath/index.md +++ b/files/fr/web/api/idbindex/keypath/index.md @@ -70,7 +70,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/multientry/index.md b/files/fr/web/api/idbindex/multientry/index.md index 30665f1d02..f4fb962511 100644 --- a/files/fr/web/api/idbindex/multientry/index.md +++ b/files/fr/web/api/idbindex/multientry/index.md @@ -69,7 +69,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md index 62d6b5ca7f..db43fd0aed 100644 --- a/files/fr/web/api/idbindex/name/index.md +++ b/files/fr/web/api/idbindex/name/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md index 3ca57791da..1e06ea97b3 100644 --- a/files/fr/web/api/idbindex/objectstore/index.md +++ b/files/fr/web/api/idbindex/objectstore/index.md @@ -72,7 +72,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md index 7216e38d94..efc19c4443 100644 --- a/files/fr/web/api/idbindex/opencursor/index.md +++ b/files/fr/web/api/idbindex/opencursor/index.md @@ -120,7 +120,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md index 9e5e8a9114..03343cf485 100644 --- a/files/fr/web/api/idbindex/openkeycursor/index.md +++ b/files/fr/web/api/idbindex/openkeycursor/index.md @@ -123,7 +123,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | ## Browser compatibility diff --git a/files/fr/web/api/idbindex/unique/index.md b/files/fr/web/api/idbindex/unique/index.md index 5914f7aab3..a9b0b8c2f6 100644 --- a/files/fr/web/api/idbindex/unique/index.md +++ b/files/fr/web/api/idbindex/unique/index.md @@ -68,7 +68,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/bound/index.md b/files/fr/web/api/idbkeyrange/bound/index.md index 36f8f75635..882a8d9f17 100644 --- a/files/fr/web/api/idbkeyrange/bound/index.md +++ b/files/fr/web/api/idbkeyrange/bound/index.md @@ -80,7 +80,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/includes/index.md b/files/fr/web/api/idbkeyrange/includes/index.md index dbef422d06..0dea371048 100644 --- a/files/fr/web/api/idbkeyrange/includes/index.md +++ b/files/fr/web/api/idbkeyrange/includes/index.md @@ -71,7 +71,7 @@ IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md index 0e1d98cfc8..05dc4b2a02 100644 --- a/files/fr/web/api/idbkeyrange/lower/index.md +++ b/files/fr/web/api/idbkeyrange/lower/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.md b/files/fr/web/api/idbkeyrange/lowerbound/index.md index 43945e77cf..afa0308e5b 100644 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.md +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/IDBKeyRange/lowerBound --- {{APIRef("IndexedDB")}} -La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. +La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche). @@ -72,7 +72,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md index cccd9f002a..f120a77299 100644 --- a/files/fr/web/api/idbkeyrange/loweropen/index.md +++ b/files/fr/web/api/idbkeyrange/loweropen/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/only/index.md b/files/fr/web/api/idbkeyrange/only/index.md index 574f4d7482..5e778c6498 100644 --- a/files/fr/web/api/idbkeyrange/only/index.md +++ b/files/fr/web/api/idbkeyrange/only/index.md @@ -66,7 +66,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md index 52fb657e00..59ef850bf0 100644 --- a/files/fr/web/api/idbkeyrange/upper/index.md +++ b/files/fr/web/api/idbkeyrange/upper/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.md b/files/fr/web/api/idbkeyrange/upperbound/index.md index fc8c458d23..61206cf48c 100644 --- a/files/fr/web/api/idbkeyrange/upperbound/index.md +++ b/files/fr/web/api/idbkeyrange/upperbound/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBKeyRange/upperBound --- {{APIRef("IndexedDB")}} -La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. +La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite). @@ -73,7 +73,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.md b/files/fr/web/api/idbkeyrange/upperopen/index.md index 48723184ae..99cac8651f 100644 --- a/files/fr/web/api/idbkeyrange/upperopen/index.md +++ b/files/fr/web/api/idbkeyrange/upperopen/index.md @@ -55,7 +55,7 @@ function displayData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md index 22877034f9..65a2264933 100644 --- a/files/fr/web/api/idbobjectstore/add/index.md +++ b/files/fr/web/api/idbobjectstore/add/index.md @@ -49,7 +49,7 @@ Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un d <tr> <td><code>TransactionInactiveError</code></td> <td> - La transaction pour cet objet {{domxref("IDBObjectStore")}} + La transaction pour cet objet {{domxref("IDBObjectStore")}} est inactive. </td> </tr> @@ -154,7 +154,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md index edaf50bab0..95960944cf 100644 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.md +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md @@ -47,14 +47,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -81,7 +81,7 @@ function addData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md index 0b373c0cd6..bba5c673f7 100644 --- a/files/fr/web/api/idbobjectstore/clear/index.md +++ b/files/fr/web/api/idbobjectstore/clear/index.md @@ -51,7 +51,7 @@ DBOpenRequest.onsuccess = function(event) { }; function clearData() { - // ouvre une transaction de lecture / écriture prête pour le nettoyage + // ouvre une transaction de lecture / écriture prête pour le nettoyage var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction @@ -83,7 +83,7 @@ function clearData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/count/index.md b/files/fr/web/api/idbobjectstore/count/index.md index bdbb5e7ebb..e9ca828cd6 100644 --- a/files/fr/web/api/idbobjectstore/count/index.md +++ b/files/fr/web/api/idbobjectstore/count/index.md @@ -56,7 +56,7 @@ countRequest.onsuccess = function() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/createindex/index.md b/files/fr/web/api/idbobjectstore/createindex/index.md index e5d27186b5..ba5077317c 100644 --- a/files/fr/web/api/idbobjectstore/createindex/index.md +++ b/files/fr/web/api/idbobjectstore/createindex/index.md @@ -89,7 +89,7 @@ L'{{domxref("IDBIndex","accès")}} au nouvel index. - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} `versionchange`. - `TransactionInactiveError` - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). - `ConstraintError` - : Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet. @@ -105,7 +105,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -121,7 +121,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -150,7 +150,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/delete/index.md b/files/fr/web/api/idbobjectstore/delete/index.md index f79aca9cd7..00ac3dcdb7 100644 --- a/files/fr/web/api/idbobjectstore/delete/index.md +++ b/files/fr/web/api/idbobjectstore/delete/index.md @@ -94,7 +94,7 @@ function deleteData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.md b/files/fr/web/api/idbobjectstore/deleteindex/index.md index 9f493d0d3a..747b2f4447 100644 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.md +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/IDBObjectStore/deleteIndex --- {{ APIRef("IndexedDB") }} -La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). +La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). -> **Note :** Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. +> **Note :** Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. {{AvailableInWorkers}} @@ -32,9 +32,9 @@ Void. - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) [`versionchange`](/fr/docs/Web/API/IDBTransaction/mode#versionchange). - `TransactionInactiveError` - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). - `NotFoundError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. ## Exemple @@ -48,7 +48,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -64,7 +64,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -96,7 +96,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/get/index.md b/files/fr/web/api/idbobjectstore/get/index.md index 14fed16a99..c0c20b9c06 100644 --- a/files/fr/web/api/idbobjectstore/get/index.md +++ b/files/fr/web/api/idbobjectstore/get/index.md @@ -25,7 +25,7 @@ var request = objectStore.get(cle); ## Renvoie - Une {{domxref("IDBRequest","requête")}} - - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. + - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. ## Exceptions @@ -93,7 +93,7 @@ function deleteData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/getall/index.md b/files/fr/web/api/idbobjectstore/getall/index.md index 7749e9a1a7..c4afd0d18c 100644 --- a/files/fr/web/api/idbobjectstore/getall/index.md +++ b/files/fr/web/api/idbobjectstore/getall/index.md @@ -30,9 +30,9 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive. - `DataError` - - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. + - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. - `InvalidStateError` - - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. + - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. - `TypeError` - : Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif. @@ -40,7 +40,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs @@ -50,7 +50,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}} - {{domxref("IDBDatabase","Débuter une connexion")}} -- {{domxref("IDBTransaction","Utiliser les transactions")}} +- {{domxref("IDBTransaction","Utiliser les transactions")}} - {{domxref("IDBKeyRange","Définir l'intervalle des clés")}} - {{domxref("IDBObjectStore","Accès aux magasins d'objets")}} - {{domxref("IDBCursor","Utiliser les curseurs")}} diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.md b/files/fr/web/api/idbobjectstore/getallkeys/index.md index df2f4b69ce..6ffc62f82f 100644 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.md +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBObjectStore/getAllKeys --- {{APIRef("IndexedDB")}} -La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). +La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête. @@ -33,7 +33,7 @@ Pour différencier ces deux situations, on peut appeler la méthode {{domxref("I - `query` {{optional_inline}} - : Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}). - `count` {{optional_inline}} - - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. + - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. ### Valeur de retour diff --git a/files/fr/web/api/idbobjectstore/index.md b/files/fr/web/api/idbobjectstore/index.md index 4c761abec2..4af77216a9 100644 --- a/files/fr/web/api/idbobjectstore/index.md +++ b/files/fr/web/api/idbobjectstore/index.md @@ -133,7 +133,7 @@ objectStoreRequest.onsuccess = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/index/index.md b/files/fr/web/api/idbobjectstore/index/index.md index 2e677c3bae..beb85e8f07 100644 --- a/files/fr/web/api/idbobjectstore/index/index.md +++ b/files/fr/web/api/idbobjectstore/index/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.md b/files/fr/web/api/idbobjectstore/indexnames/index.md index f46c3122ca..2c4c6036ae 100644 --- a/files/fr/web/api/idbobjectstore/indexnames/index.md +++ b/files/fr/web/api/idbobjectstore/indexnames/index.md @@ -25,7 +25,7 @@ Une liste {{domxref("DOMStringList")}}. ## Exemples -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -84,7 +84,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/keypath/index.md b/files/fr/web/api/idbobjectstore/keypath/index.md index 703e7690d6..14fb85de5d 100644 --- a/files/fr/web/api/idbobjectstore/keypath/index.md +++ b/files/fr/web/api/idbobjectstore/keypath/index.md @@ -28,7 +28,7 @@ N'importe quel type de valeur. ## Exemple -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -86,7 +86,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/name/index.md b/files/fr/web/api/idbobjectstore/name/index.md index 982fb83d19..abbf7e9c25 100644 --- a/files/fr/web/api/idbobjectstore/name/index.md +++ b/files/fr/web/api/idbobjectstore/name/index.md @@ -90,7 +90,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.md b/files/fr/web/api/idbobjectstore/opencursor/index.md index 0b96ddad30..2b33c941b7 100644 --- a/files/fr/web/api/idbobjectstore/opencursor/index.md +++ b/files/fr/web/api/idbobjectstore/opencursor/index.md @@ -66,7 +66,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.md b/files/fr/web/api/idbobjectstore/openkeycursor/index.md index 230f9d0454..51d2090007 100644 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.md +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.md @@ -64,7 +64,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/put/index.md b/files/fr/web/api/idbobjectstore/put/index.md index 08ad1bc6a4..c013132dd1 100644 --- a/files/fr/web/api/idbobjectstore/put/index.md +++ b/files/fr/web/api/idbobjectstore/put/index.md @@ -75,12 +75,12 @@ Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} : </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le paramètre pour la + >), ne dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé. </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le chemin de clé du + >), ne dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide. </li> <li> @@ -148,7 +148,7 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/transaction/index.md b/files/fr/web/api/idbobjectstore/transaction/index.md index 75af9a1542..2c2dc66fb7 100644 --- a/files/fr/web/api/idbobjectstore/transaction/index.md +++ b/files/fr/web/api/idbobjectstore/transaction/index.md @@ -42,14 +42,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -76,7 +76,7 @@ function addData() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbopendbrequest/index.md b/files/fr/web/api/idbopendbrequest/index.md index 303e640f91..3a87aa54b5 100644 --- a/files/fr/web/api/idbopendbrequest/index.md +++ b/files/fr/web/api/idbopendbrequest/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/IDBOpenDBRequest --- {{APIRef("IndexedDB")}} -L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). +L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). {{AvailableInWorkers}} @@ -21,7 +21,7 @@ L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux rés ## Propriétés -_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. +_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. ### Évènements @@ -32,11 +32,11 @@ _Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref( ## Méthodes -_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ +_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ ## Exemple -Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) +Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) ```js var db; @@ -77,12 +77,12 @@ DBOpenRequest.onupgradeneeded = function(event) { // définit quels éléments de données l'objet de stockage contiendra. - objectStore.createIndex("hours", "hours", { unique: false }); - objectStore.createIndex("minutes", "minutes", { unique: false }); - objectStore.createIndex("day", "day", { unique: false }); - objectStore.createIndex("month", "month", { unique: false }); - objectStore.createIndex("year", "year", { unique: false }); - objectStore.createIndex("notified", "notified", { unique: false }); + objectStore.createIndex("hours", "hours", { unique: false }); + objectStore.createIndex("minutes", "minutes", { unique: false }); + objectStore.createIndex("day", "day", { unique: false }); + objectStore.createIndex("month", "month", { unique: false }); + objectStore.createIndex("year", "year", { unique: false }); + objectStore.createIndex("notified", "notified", { unique: false }); }; ``` @@ -91,7 +91,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | | {{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}} | {{Spec2('IndexedDB')}} | Définition initiale | -| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/error/index.md b/files/fr/web/api/idbrequest/error/index.md index 5377fc62db..9e57814d5d 100644 --- a/files/fr/web/api/idbrequest/error/index.md +++ b/files/fr/web/api/idbrequest/error/index.md @@ -80,7 +80,7 @@ objectStoreTitleRequest.onerror = function() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/index.md b/files/fr/web/api/idbrequest/index.md index ef33447c2f..e0a2ce05ad 100644 --- a/files/fr/web/api/idbrequest/index.md +++ b/files/fr/web/api/idbrequest/index.md @@ -18,7 +18,7 @@ L'interface **`IDBRequest`** de l'API IndexedDB donne accès par ses gestionnair Cet objet **`IDBRequest`** ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet **`IDBRequest`** utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition. -Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. +Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété `result` et un évènement `success` est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété `error` et un évènement `error` est lancé ({{domxref("IDBRequest.onerror")}}). @@ -41,7 +41,7 @@ _Hérite des propriétés de {{domxref("EventTarget")}}._ - {{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}} - : La propriété **`transaction`** de l'interface **`IDBRequest`** renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer `null` si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données. - {{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}} - - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. + - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. ## Méthodes diff --git a/files/fr/web/api/idbrequest/onerror/index.md b/files/fr/web/api/idbrequest/onerror/index.md index edad1a851e..391df12467 100644 --- a/files/fr/web/api/idbrequest/onerror/index.md +++ b/files/fr/web/api/idbrequest/onerror/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/onsuccess/index.md b/files/fr/web/api/idbrequest/onsuccess/index.md index 201d7b58cf..5e872bcd42 100644 --- a/files/fr/web/api/idbrequest/onsuccess/index.md +++ b/files/fr/web/api/idbrequest/onsuccess/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/readystate/index.md b/files/fr/web/api/idbrequest/readystate/index.md index 710868b47b..0b33b98759 100644 --- a/files/fr/web/api/idbrequest/readystate/index.md +++ b/files/fr/web/api/idbrequest/readystate/index.md @@ -66,8 +66,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/source/index.md b/files/fr/web/api/idbrequest/source/index.md index 68ea7bf33d..d6a79a450a 100644 --- a/files/fr/web/api/idbrequest/source/index.md +++ b/files/fr/web/api/idbrequest/source/index.md @@ -23,7 +23,7 @@ La propriété **`source`** est une propriété en lecture seule, rattachée à ### Valeur -Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. +Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. ## Exemples @@ -67,8 +67,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/transaction/index.md b/files/fr/web/api/idbrequest/transaction/index.md index 1bbf05d769..98e0953986 100644 --- a/files/fr/web/api/idbrequest/transaction/index.md +++ b/files/fr/web/api/idbrequest/transaction/index.md @@ -58,7 +58,7 @@ objectStoreTitleRequest.onerror = function() { }; ``` -Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: +Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ```js var openRequest = indexedDB.open('db', 2); @@ -87,7 +87,7 @@ openRequest.onsuccess = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/abort/index.md b/files/fr/web/api/idbtransaction/abort/index.md index 53a6dbd6aa..ca40486ad8 100644 --- a/files/fr/web/api/idbtransaction/abort/index.md +++ b/files/fr/web/api/idbtransaction/abort/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/db/index.md b/files/fr/web/api/idbtransaction/db/index.md index 3032ed9c36..1be2d0e15f 100644 --- a/files/fr/web/api/idbtransaction/db/index.md +++ b/files/fr/web/api/idbtransaction/db/index.md @@ -25,7 +25,7 @@ Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la f ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. À la fin, la méthode **`db`** sert à renvoyer la connexion à la base de données associée à la transaction. @@ -55,7 +55,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>'; }; @@ -82,7 +82,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error/index.md b/files/fr/web/api/idbtransaction/error/index.md index 9684817483..6d197cba4e 100644 --- a/files/fr/web/api/idbtransaction/error/index.md +++ b/files/fr/web/api/idbtransaction/error/index.md @@ -30,7 +30,7 @@ Cette propriété vaut `null` si la transaction n'est pas terminée ou qu'elle e ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. La propriété **`error`** sert dans le bloc `transaction.onerror = function(event) {...}` afin d'afficher le type d'erreur qui est survenue. @@ -61,7 +61,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>'; }; @@ -85,7 +85,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error_event/index.md b/files/fr/web/api/idbtransaction/error_event/index.md index b8d6a070bf..dad1332ca4 100644 --- a/files/fr/web/api/idbtransaction/error_event/index.md +++ b/files/fr/web/api/idbtransaction/error_event/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/IDBDatabase/onerror --- {{APIRef("IndexedDB")}} -Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. +Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. {{AvailableInWorkers}} @@ -59,7 +59,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/index.md b/files/fr/web/api/idbtransaction/index.md index 7fc9a104d3..74d2580677 100644 --- a/files/fr/web/api/idbtransaction/index.md +++ b/files/fr/web/api/idbtransaction/index.md @@ -53,7 +53,7 @@ Cette interface hérite de {{domxref("EventTarget")}}. - {{domxref("IDBTransaction.onabort")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `abort` qui est déclenché lorsque la transaction a été interrompue. - {{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}} - - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. + - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. - {{domxref("IDBTransaction.onerror")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `error` qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement. diff --git a/files/fr/web/api/idbtransaction/mode/index.md b/files/fr/web/api/idbtransaction/mode/index.md index 82da774e36..9737c77599 100644 --- a/files/fr/web/api/idbtransaction/mode/index.md +++ b/files/fr/web/api/idbtransaction/mode/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstore/index.md b/files/fr/web/api/idbtransaction/objectstore/index.md index 2ccc74eb6c..0924e5d113 100644 --- a/files/fr/web/api/idbtransaction/objectstore/index.md +++ b/files/fr/web/api/idbtransaction/objectstore/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/IDBTransaction/objectStore La méthode **`objectStore()`**, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}. -Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. +Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. {{AvailableInWorkers}} @@ -40,7 +40,7 @@ Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets ## Exemple -Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. +Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. La méthode **`objectStore()`** permet d'accéder au magasin d'objets `"toDoList"`. @@ -98,7 +98,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.md b/files/fr/web/api/idbtransaction/objectstorenames/index.md index 6525fd7eb3..e5f1980404 100644 --- a/files/fr/web/api/idbtransaction/objectstorenames/index.md +++ b/files/fr/web/api/idbtransaction/objectstorenames/index.md @@ -24,7 +24,7 @@ Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/imagedata/data/index.md b/files/fr/web/api/imagedata/data/index.md index 58ac32657f..3cc3046f0a 100644 --- a/files/fr/web/api/imagedata/data/index.md +++ b/files/fr/web/api/imagedata/data/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/ImageData/data --- {{APIRef("Canvas API")}} -La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. +La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. ## Syntax @@ -22,7 +22,7 @@ imagedata.data; // Uint8ClampedArray[40000] | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/imagedata/index.md b/files/fr/web/api/imagedata/index.md index d87083c7a8..c671ae3f28 100644 --- a/files/fr/web/api/imagedata/index.md +++ b/files/fr/web/api/imagedata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ImageData --- {{APIRef("Canvas API")}} -L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. +L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. ## Constructeurs @@ -31,7 +31,7 @@ L'interface **`ImageData`** représente les données des pixels au sein d'une ce | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/index.md b/files/fr/web/api/index.md index dd3ccbf680..6a9c14cfa8 100644 --- a/files/fr/web/api/index.md +++ b/files/fr/web/api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API --- Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site. -Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. +Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. ## Spécifications diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md index 025ba060ba..10f55e0222 100644 --- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md @@ -23,14 +23,14 @@ Même dans le même navigateur, en utilisant la même méthode de stockage, il e Généralement, les deux principaux types de stockage sont les suivants : -- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). -- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. +- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). +- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome). ### Spécificités de Firefox -Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : +Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : - ```js var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" }); @@ -45,14 +45,14 @@ Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue ve ### "Default storage" dans Firefox _(stockage par défaut)_ -C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. +C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. ## Où sont stockées les données ? Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) : - `<profile>/storage` — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " _(manager de quotas)_ (voir ci-dessous). -- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. +- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. - `<profile>/storage/temporary` — répertoire de stockage des données temporaires. - `<profile>/storage/default` — répertoire de stockage des données par défaut. @@ -66,11 +66,11 @@ Chaque type de stockage représente un référentiel distinct, voici la cartogra ## Limites de stockage -L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. +L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée **"origin eviction"** _(éviction d'origine)_ entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence. -Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. +Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. Par exemple : @@ -86,7 +86,7 @@ Les deux limites reagissent différemment quand la limite est atteinte : - La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine. - La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre. -> **Note :** Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance `QuotaExceededError`. +> **Note :** Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance `QuotaExceededError`. ## Politique LRU diff --git a/files/fr/web/api/indexeddb_api/index.md b/files/fr/web/api/indexeddb_api/index.md index 3a800fd428..3500a8e86a 100644 --- a/files/fr/web/api/indexeddb_api/index.md +++ b/files/fr/web/api/indexeddb_api/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/API_IndexedDB --- {{DefaultAPISidebar("IndexedDB")}} -IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. +IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. {{AvailableInWorkers}} @@ -23,8 +23,8 @@ IndexedDB est une API de bas niveau qui permet le stockage côté client de quan IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une **clef**; tout objet supporté par [l'algorithme de clônage structuré](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure) peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de **transactions**. - Plus d'informations sur les [concepts derrière IndexedDB](/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB). -- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). -- Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). +- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). +- Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). > **Note :** Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines. @@ -38,7 +38,7 @@ Il y a un certain nombre de technologies web pour stocker différents types de d ## Interfaces -Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. +Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. ### Se connecter à la base de données @@ -75,30 +75,30 @@ Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/A Cette spécification provoque des évènements avec les interfaces personnalisées suivantes: - {{domxref("IDBVersionChangeEvent")}} - - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. + - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. ### Interfaces obsolètes Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit : - {{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}} - - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. -- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} + - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. +- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} - : Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données. - {{domxref("IDBTransactionSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBTransaction")}}. - {{domxref("IDBObjectStoreSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBObjectStore")}}. - {{domxref("IDBIndexSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBIndex")}}. + - : Version synchrone de {{domxref("IDBIndex")}}. - {{domxref("IDBFactorySync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBFactory")}}. - {{domxref("IDBEnvironmentSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBEnvironment")}}. + - : Version synchrone de {{domxref("IDBEnvironment")}}. - {{domxref("IDBDatabaseSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBDatabase")}}. + - : Version synchrone de {{domxref("IDBDatabase")}}. - {{domxref("IDBCursorSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBCursor")}}. + - : Version synchrone de {{domxref("IDBCursor")}}. ## Exemples diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md index c7f9494867..a99042f762 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md @@ -68,9 +68,9 @@ var request = window.indexedDB.open("MyTestDatabase", 3); Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander". -La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). +La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). -Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération `open()`, puis, un événement `onupgradeneeded` est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. +Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération `open()`, puis, un événement `onupgradeneeded` est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. > **Attention :** Le numéro de version est un nombre "`unsigned long long`" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement `upgradeneeded`. Par exemple, n'utilisez pas 2.4 comme un numéro de version : > `var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2` @@ -109,7 +109,7 @@ request.onsuccess = function(event) { #### Gérer les erreurs -Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : +Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : ```js db.onerror = function(event) { @@ -134,7 +134,7 @@ request.onupgradeneeded = function(event) { }; ``` -Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant (par exemple, pour changer la `keyPath`), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données. +Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant (par exemple, pour changer la `keyPath`), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données. Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. @@ -144,7 +144,7 @@ Blink/Webkit supporte la version courante de la spécification, telle que livré ### Structurer la base de données -Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. +Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. Le tableau suivant montre les différentes manières d'attribuer des clés. @@ -152,7 +152,7 @@ Le tableau suivant montre les différentes manières d'attribuer des clés. | ------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Non | Non | L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur. | | Oui | Non | L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path. | -| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | +| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | | Oui | Oui | L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé. | Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet. @@ -252,11 +252,11 @@ Pour plus de détails sur le générateur de clés, voyez ["W3C Key Generators"] Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: `readonly` _(lecture seule)_, `readwrite` _(lecture/écriture)_, et `versionchange` _(changement de version)_. -Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) +Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode `readonly`ou `readwrite`. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode `readwrite`. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les `storeNames` (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le `mode` (`readonly` ou `readwrite`) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode `readonly`. -> **Note :** À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction `readwrite` {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement `complete` est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement `complete` peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. +> **Note :** À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction `readwrite` {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement `complete` est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement `complete` peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces : @@ -343,7 +343,7 @@ db.transaction("customers").objectStore("customers").get("444-44-4444").onsucces Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction `"readwrite"`. Appeler une `transaction()` sans spécifier de mode nous donne une transaction `"readonly"`. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété `result`. -Vous pouvez accélérer l’accès à vos données en limitant la portée et le mode de la transaction. Voici deux astuces : +Vous pouvez accélérer l’accès à vos données en limitant la portée et le mode de la transaction. Voici deux astuces : - Lors de la définition de la [scope](/fr/docs/IndexedDB/Using_IndexedDB$edit#scope) _(portée)_, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent. - Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" _(lecture/écriture)_ sur un objet de stockage. Pour en savoir plus, voir la définition relative aux [transactions in the Basic Concepts article](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction). @@ -399,7 +399,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -La fonction `openCursor()` prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. +La fonction `openCursor()` prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci : @@ -418,7 +418,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus : +> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus : > > ```js > objectStore.getAll().onsuccess = function(event) { @@ -444,7 +444,7 @@ index.get("Donna").onsuccess = function(event) { }; ``` -Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . +Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . Si vous avez besoin d'accèder à toutes les entrées avec un `name` donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici : @@ -541,7 +541,7 @@ Voyez "[IDBCursor Constants](/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US& ## La version change alors qu'une application Web est ouverte dans un autre onglet -Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez `open()` avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : +Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez `open()` avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : ```js var openReq = mozIndexedDB.open("MyTestDatabase", 2); @@ -592,7 +592,7 @@ Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit 1. Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un `AbortError`. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction. 2. Une fois toutes les transactions terminées, la connexion à la base de données est fermée . -3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue . +3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue . Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement). @@ -600,7 +600,7 @@ Avant ces versions de navigateurs, les transactions étaient interrompues silenc Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement. -Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction. +Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction. Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload _(déchargement_). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter. @@ -610,7 +610,7 @@ Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase ## Le tri et les langues -Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit : +Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit : - a - b @@ -1312,7 +1312,7 @@ input { Référence : -- [IndexedDB API Reference](/en/IndexedDB) +- [IndexedDB API Reference](/en/IndexedDB) - [Indexed Database API Specification](http://www.w3.org/TR/IndexedDB/) - [Using IndexedDB in chrome](/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome) - [Using JavaScript generators in Firefox](/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox) @@ -1321,7 +1321,7 @@ Référence : Tutoriels : - [Databinding UI Elements with IndexedDB](http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/) -- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) +- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) Bibliothèques : diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 40fdb41249..79eb4d4872 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -46,7 +46,7 @@ Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élém #### Options de l'observateur d'intersection -L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : +L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : - `root` - : L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur `null`, sa valeur par défaut est la zone d'affichage (le _viewport_) du navigateur. @@ -71,14 +71,14 @@ var callback = function(entries, observer) { entries.forEach(entry => { // chaque élément de entries correspond à une variation // d'intersection pour un des éléments cible: - // entry.boundingClientRect - // entry.intersectionRatio - // entry.intersectionRect - // entry.isIntersecting - // entry.rootBounds - // entry.target - // entry.time - }); + // entry.boundingClientRect + // entry.intersectionRatio + // entry.intersectionRect + // entry.isIntersecting + // entry.rootBounds + // entry.target + // entry.time + }); }; ``` @@ -102,7 +102,7 @@ Le rectangle utilisé pour délimiter la racine de l'intersection peut être aju Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des **paliers**. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers. -Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. +Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers : diff --git a/files/fr/web/api/intersectionobserverentry/index.md b/files/fr/web/api/intersectionobserverentry/index.md index cb495920d8..3d0bacde86 100644 --- a/files/fr/web/api/intersectionobserverentry/index.md +++ b/files/fr/web/api/intersectionobserverentry/index.md @@ -24,7 +24,7 @@ Les instances de `IntersectionObserverEntry` sont délivrées à une fonction de - {{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible. - {{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}} - - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. + - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. - {{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine. - {{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}} diff --git a/files/fr/web/api/issecurecontext/index.md b/files/fr/web/api/issecurecontext/index.md index 91c1fa1ae2..64b9378248 100644 --- a/files/fr/web/api/issecurecontext/index.md +++ b/files/fr/web/api/issecurecontext/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). +La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). ## Syntaxe @@ -14,7 +14,7 @@ La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerG ### Valeur -Un {{domxref("Boolean")}}. +Un {{domxref("Boolean")}}. ## Spécifications diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index 471e63789c..259ad26cc6 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -11,7 +11,7 @@ Si le clavier n'est pas physique, la valeur retournée sera définie par le navi Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par `KeyboardEvent.code` afin de déterminer le caractère utilisé sur le clavier. -Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. +Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. Pour déterminer quel caractère correspond à un `key event`, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}. @@ -64,14 +64,14 @@ Pour essayer ce code, cliquez sur le lien ci-dessous: ### Gérer les événements de clavier dans un jeu -Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY. +Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY. #### HTML ```html <p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> - <polygon id="spaceship" points="15,0 0,30 30,30"/> + <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> ``` diff --git a/files/fr/web/api/keyboardevent/index.md b/files/fr/web/api/keyboardevent/index.md index 8cf14e1b5f..a05844a077 100644 --- a/files/fr/web/api/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/KeyboardEvent --- {{APIRef("DOM Events")}} -Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. +Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. -> **Note :** `KeyboardEvent` indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement `input` HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés. +> **Note :** `KeyboardEvent` indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement `input` HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés. ## Constructeur - {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} - - : Crée un objet `KeyboardEvent`. + - : Crée un objet `KeyboardEvent`. ## Méthodes @@ -27,7 +27,7 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE - {{domxref("KeyboardEvent.getModifierState()")}} - - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que + - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd> @@ -43,12 +43,12 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE <kbd>Meta</kbd> - , était pressée quand l'évènement a été créé. + , était pressée quand l'évènement a été créé. - {{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. - {{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Propriétés @@ -56,7 +56,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}} - - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Alt</kbd> @@ -68,27 +68,27 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" <kbd>⌥</kbd> - sous OS X) était active quand l'évènement touche a été généré. + sous OS X) était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}} - : Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide. - > **Note :** si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère. + > **Note :** si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère. - > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. + > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. - {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}} - - : Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement `keypress`. Pour les touches dont l'attribut `char` contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables. + - : Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement `keypress`. Pour les touches dont l'attribut `char` contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables. - > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. + > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. - {{domxref("KeyboardEvent.code")}} {{Readonlyinline}} - - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. + - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche <kbd>Ctrl</kbd> @@ -98,7 +98,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Renvoie un {{jsxref ("Boolean")}} qui est `true` si l'événement est déclenché après `compositionstart` et avant `compositionend`. - {{domxref("KeyboardEvent.key")}} {{Readonlyinline}} - : Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement. -- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} +- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée. @@ -118,15 +118,15 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée. - {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Meta</kbd> - (sur les claviers Mac, la touche + (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> - ; sur les claviers Windows, la touche Windows ( + ; sur les claviers Windows, la touche Windows ( <kbd>⊞</kbd> @@ -136,33 +136,33 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref("Booléen")}} qui est `true` si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement. - {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Shift</kbd> - était active quand l'évènement touche a été généré. + était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}} - - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que `keyCode`. + - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que `keyCode`. > **Attention :** cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. ## Notes -Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : +Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : -1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; +1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; 2. si la touche n'est pas une touche de modification, l'événement `keypress` est envoyé ; 3. lorsque l'utilisateur relâche la touche, l'événement `keyup` est envoyé. -### Cas particuliers +### Cas particuliers -Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements `keydown` et `keyup`. +Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements `keydown` et `keyup`. > **Note :** Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement `keypress` pour ces touches. -Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement `keypress` ; ce comportement incohérent était le {{bug(602812)}}. +Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement `keypress` ; ce comportement incohérent était le {{bug(602812)}}. ### Gestion de l'auto-répétition @@ -192,7 +192,7 @@ Dans certains environnements basés sur GTK, l'auto-répétition génère automa 7. << répétition jusqu'à ce que l'utilisateur relâche la touche >> 8. `keyup` -Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. +Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. #### Gestion de l'auto-répétition avant Gecko 5.0 @@ -224,23 +224,23 @@ document.addEventListener('keydown', (event) => { return; } - if (event.ctrlKey) { - // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), - // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. - alert(`Combinaison de ctrlKey + ${nomTouche}`); - } else { - alert(`Touche pressée ${nomTouche}`); - } + if (event.ctrlKey) { + // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), + // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. + alert(`Combinaison de ctrlKey + ${nomTouche}`); + } else { + alert(`Touche pressée ${nomTouche}`); + } }, false); document.addEventListener('keyup', (event) => { - const nomTouche = event.key; + const nomTouche = event.key; - // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. - // Aussi event.ctrlKey est false. - if (nomTouche === 'Control') { - alert('La touche Control a été relâchée'); - } + // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. + // Aussi event.ctrlKey est false. + if (nomTouche === 'Control') { + alert('La touche Control a été relâchée'); + } }, false); </script> @@ -255,9 +255,9 @@ document.addEventListener('keyup', (event) => { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | -La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. +La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.md b/files/fr/web/api/keyboardevent/key/key_values/index.md index 2fb66f3c41..3d831fb852 100644 --- a/files/fr/web/api/keyboardevent/key/key_values/index.md +++ b/files/fr/web/api/keyboardevent/key/key_values/index.md @@ -385,7 +385,7 @@ Modifiers are special keys which are used to generate special characters or caus </tbody> </table> -\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. +\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. ## Navigation keys @@ -616,7 +616,7 @@ Modifiers are special keys which are used to generate special characters or caus <tr> <td><code>"Insert"</code></td> <td> - The Insert key, <kbd>Ins</kbd>. Toggles between inserting and + The Insert key, <kbd>Ins</kbd>. Toggles between inserting and overwriting text. </td> <td><code>VK_INSERT</code> (0x2D)</td> @@ -1191,7 +1191,7 @@ Some keys are common across multiple languages, while others exist only on keybo identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated - {{event("compositionupdate")}} event's + {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. </td> <td></td> @@ -1301,7 +1301,7 @@ Some keys are common across multiple languages, while others exist only on keybo <code>GDK_KEY_Muhenkan</code> (0xFF22)<br /><code >Qt::Key_Muhenkan</code > - (0x01001122)<br /> + (0x01001122)<br /> </td> <td><code>KEYCODE_MUHENKAN</code> (213)</td> </tr> @@ -1598,11 +1598,11 @@ These keys are only available on Japanese keyboards. ### Dead keycodes for Linux -Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. +Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK -The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: +The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: <table class="standard-table"> <tbody> @@ -1655,7 +1655,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td> - <td> ͂</td> + <td> ͂</td> <td></td> </tr> <tr> @@ -1755,7 +1755,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x0100125D) </td> - <td> ͅ</td> + <td> ͅ</td> <td>Iota subscript.</td> </tr> <tr> @@ -1795,7 +1795,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001261) </td> - <td> ̡</td> + <td> ̡</td> <td></td> </tr> <tr> @@ -1805,22 +1805,22 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001262) </td> - <td> ̛</td> + <td> ̛</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td> - <td> ̶̶</td> + <td> ̶̶</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td> - <td> ̓̓</td> + <td> ̓̓</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td> - <td> ᾿</td> + <td> ᾿</td> <td></td> </tr> <tr> @@ -1835,7 +1835,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td> - <td> ̏</td> + <td> ̏</td> <td></td> </tr> <tr> @@ -1845,7 +1845,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td> - <td> ̱</td> + <td> ̱</td> <td></td> </tr> <tr> @@ -1865,7 +1865,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td> - <td> ̤</td> + <td> ̤</td> <td></td> </tr> <tr> @@ -2524,7 +2524,7 @@ The multimedia keys are extra buttons or keys for controlling media devices, fou </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. \[2] Prior to Firefox 37, Firefox generated the key code `"FastFwd"` on some platforms and `"Unidentified"` on others instead of `"MediaFastForward"`. @@ -2736,7 +2736,7 @@ These media keys are used specifically for controlling audio. </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). +\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). ## TV control keys @@ -4333,7 +4333,7 @@ Some keyboards offer special keys for launching or switching to certain common a </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. \[2] Google Chrome 57 and earlier returned `"LaunchMyComputer"` instead of `"LaunchApplication1"`. See [Chrome Bug 612743](https://bugs.chromium.org/p/chromium/issues/detail?id=612743) for more information. @@ -4516,7 +4516,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_DECIMAL</code> (0x6E)</td> <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td> - <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> + <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td> </tr> <tr> @@ -4594,7 +4594,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_SEPARATOR</code> (0x6C)</td> <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td> - <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> + <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td> </tr> <tr> diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.md b/files/fr/web/api/keyboardevent/keyboardevent/index.md index a083a3e792..d964f56a5a 100644 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/KeyboardEvent/KeyboardEvent --- {{APIRef("DOM Events")}} -Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. +Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. ## Syntaxe @@ -20,7 +20,7 @@ Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEven ### Valeurs - typeArg - - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. + - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. - KeyboardEventInit{{optional_inline}} - : Un dictionnaire `KeyboardEventInit` ayant les champs suivants : diff --git a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md index d07b0c664f..219cbfcfb5 100644 --- a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md +++ b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md @@ -15,7 +15,7 @@ original_slug: Web/API/EffectTiming/delay La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. -> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. ## Syntaxe diff --git a/files/fr/web/api/location/reload/index.md b/files/fr/web/api/location/reload/index.md index 2b38ab6b28..beaa0f724d 100644 --- a/files/fr/web/api/location/reload/index.md +++ b/files/fr/web/api/location/reload/index.md @@ -37,4 +37,4 @@ En résumé, ce paramètre booléen ne fait pas partie de la spécification actu ## Voir aussi - L'interface [`Location`](/fr/docs/Web/API/Location) à laquelle appartient cette méthode. -- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). +- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). diff --git a/files/fr/web/api/mediadevices/getusermedia/index.md b/files/fr/web/api/mediadevices/getusermedia/index.md index d6c56e04c4..730c88fd1c 100644 --- a/files/fr/web/api/mediadevices/getusermedia/index.md +++ b/files/fr/web/api/mediadevices/getusermedia/index.md @@ -156,7 +156,7 @@ Cet exemple donne une préférence pour la résolution de la caméra et attribue ### Utilisation de la nouvelle API dans les navigateurs plus anciens -Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. +Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. ```js // Older browsers might not implement mediaDevices at all, so we set an empty object first diff --git a/files/fr/web/api/mediastream/index.md b/files/fr/web/api/mediastream/index.md index 6ace6ed154..e20c39d3ee 100644 --- a/files/fr/web/api/mediastream/index.md +++ b/files/fr/web/api/mediastream/index.md @@ -5,39 +5,39 @@ translation_of: Web/API/MediaStream --- {{APIRef("Media Capture and Streams")}} {{SeeCompatTable}} -L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. +L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. ## Attributs - {{domxref("MediaStream.id")}} {{readonlyInline}} - : {{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet. - {{domxref("MediaStream.ended")}} {{readonlyInline}} - - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. + - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. ### Gestionnaire d'évènements - {{domxref("MediaStream.onaddtrack")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté. - {{domxref("MediaStream.onended")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée. - {{domxref("MediaStream.onremovetrack")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré. ## Méthodes - {{domxref("MediaStream.getTrackById()")}} - - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. + - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. <!----> - {{domxref("MediaStream.addTrack()")}} - - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.removeTrack()")}} - - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.getAudioTracks()")}} - - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. + - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. - {{domxref("MediaStream.getVideoTracks()")}} - - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. + - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. ## Spécifications diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md index 16243531c3..7b73db0260 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.md +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/MediaStreamAudioSourceNode --- {{APIRef("Web Audio API")}} -L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. +L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. Un `MediaElementSourceNode` n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux. diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index aa691d61f8..cc58b71477 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} -L'interface **`MouseEvent`** représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}. +L'interface **`MouseEvent`** représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}. `MouseEvent` dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet `MouseEvent` doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}. @@ -22,18 +22,18 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.altKey")}} {{readonlyinline}} - - : renvoie `true` (_vrai_) si la touche + - : renvoie `true` (_vrai_) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé. - {{domxref("MouseEvent.button")}} {{readonlyinline}} - - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. + - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. - {{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}} - : Les boutons qui sont pressés alors que l'événement est lancé. - {{domxref("MouseEvent.clientX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). + - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.clientY")}} {{readonlyinline}} - : La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} @@ -53,9 +53,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv est pressée alors que l'événement est lancé. - {{domxref("MouseEvent.movementX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.movementY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}} - : La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible. - {{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}} @@ -69,9 +69,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} - : La seconde cible pour l'événement, s'il y en a une. - {{domxref("MouseEvent.screenX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.screenY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} - : renvoie `true` si la touche @@ -83,9 +83,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.which")}} {{readonlyinline}} - : Le bouton qui est pressé alors que l'événement est lancé. - MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}} - - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). + - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). - MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}} - - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). + - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). - {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} - : La quantité de pression appliquée en cliquant. - {{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}} @@ -105,7 +105,7 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv _Cette interface hérite aussi des méthodes de ses parents_ _{{domxref("UIEvent")}} et {{domxref("Event")}}._ - {{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}} - - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. + - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. - {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}} - : initialise la valeur de l'`MouseEvent` créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien. @@ -147,7 +147,7 @@ Cliquez sur le bouton pour voir comment l'exemple fonctionne : | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Redéfinit `MouseEvent` de long à double. C'est-à-dire qu'un `PointerEvent` dont le `pointerType` est "souris" est un double. | -| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | +| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | | {{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} | {{Spec2('Pointer Lock')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `movementX` et `movementY`. | | {{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `offsetX` et `offsetY`, `pageX` et `pageY`, `x` et `y`. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme `double` et non plus `long`. | | {{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}} | {{Spec2('DOM3 Events')}} | À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur `MouseEvent()`, de la méthode `getModifierState()` et de la propriété `buttons`. | diff --git a/files/fr/web/api/mouseevent/offsetx/index.md b/files/fr/web/api/mouseevent/offsetx/index.md index b0ac0a9cc4..ebcd573d1b 100644 --- a/files/fr/web/api/mouseevent/offsetx/index.md +++ b/files/fr/web/api/mouseevent/offsetx/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetX --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEv ### Valeur renvoyée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mouseevent/offsety/index.md b/files/fr/web/api/mouseevent/offsety/index.md index 4609de06ba..9120180d44 100644 --- a/files/fr/web/api/mouseevent/offsety/index.md +++ b/files/fr/web/api/mouseevent/offsety/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetY --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEve ### Valeur retournée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mutationobserver/index.md b/files/fr/web/api/mutationobserver/index.md index ca940834c9..d19fcee06d 100644 --- a/files/fr/web/api/mutationobserver/index.md +++ b/files/fr/web/api/mutationobserver/index.md @@ -18,7 +18,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM #### Paramètres - `callback` - - : Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de `MutationObserver`. + - : Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de `MutationObserver`. ## Méthodes d’instance @@ -47,7 +47,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM </tbody> </table> -> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). +> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). ### `observe()` @@ -83,7 +83,7 @@ Vide la file des mutations enregistrées du `MutationObserver` et retourne son c ## `MutationObserverInit` -`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : +`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : > **Note :** Au moins une propriété parmi `childList`, `attributes` ou `characterData` doit être initialisée à `true`, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise. @@ -189,7 +189,7 @@ observer.disconnect(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/navigator/connection/index.md b/files/fr/web/api/navigator/connection/index.md index e2e9f34956..441a349c50 100644 --- a/files/fr/web/api/navigator/connection/index.md +++ b/files/fr/web/api/navigator/connection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Navigator/connection --- {{APIRef("Network Information API")}}{{SeeCompatTable}} -**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. +**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. ## Syntaxe diff --git a/files/fr/web/api/navigator/credentials/index.md b/files/fr/web/api/navigator/credentials/index.md index fb3d7063cc..c667a04572 100644 --- a/files/fr/web/api/navigator/credentials/index.md +++ b/files/fr/web/api/navigator/credentials/index.md @@ -25,12 +25,12 @@ L'interface {{domxref("CredentialsContainer")}}. ```js if ('credentials' in navigator) { - navigator.credentials.get({password: true}) - .then(function(creds) { - // Gérer les informations d'authentification - }); + navigator.credentials.get({password: true}) + .then(function(creds) { + // Gérer les informations d'authentification + }); } else { - // Gérer la connexion comme avant + // Gérer la connexion comme avant }; ``` diff --git a/files/fr/web/api/navigator/getgamepads/index.md b/files/fr/web/api/navigator/getgamepads/index.md index 5ca49cb54c..f3d4b4006a 100644 --- a/files/fr/web/api/navigator/getgamepads/index.md +++ b/files/fr/web/api/navigator/getgamepads/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/getGamepads --- {{ APIRef("Navigator") }}{{SeeCompatTable}} -La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. +La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. Des éléments dans le tableau peuvent être `null` si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice. diff --git a/files/fr/web/api/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md index 32c5946175..be9af7828d 100644 --- a/files/fr/web/api/navigator/getusermedia/index.md +++ b/files/fr/web/api/navigator/getusermedia/index.md @@ -12,9 +12,9 @@ original_slug: NavigatorUserMedia.getUserMedia --- {{APIRef("Media Capture and Streams")}}{{deprecated_header}} -La fonction obsolète **Navigator.getUserMedia()** demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur. +La fonction obsolète **Navigator.getUserMedia()** demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur. -Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté. +Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté. > **Note :** Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}. @@ -41,7 +41,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ``` - errorCallback - - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. + - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. ### Valeur de retour @@ -55,7 +55,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ### Largeur et hauteur -Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. +Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. ```js navigator.getUserMedia = navigator.getUserMedia || @@ -95,7 +95,7 @@ Pour utiliser `getUserMedia()` dans une application installable (par exemple une } ``` -See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. +See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. ## Spécifications @@ -112,6 +112,6 @@ See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-cap ## Voir aussi - {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée. -- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS -- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects -- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. +- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS +- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects +- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.md b/files/fr/web/api/navigator/mozislocallyavailable/index.md index 71ac7e12fe..4e6c672478 100644 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.md +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.md @@ -16,7 +16,7 @@ Permet de déterminer si une ressource donnée est disponible. window.navigator.isLocallyAvailable(uri,ifOffline); - `uri` est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne. -- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. +- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. ### Exemple @@ -33,4 +33,4 @@ Permet de déterminer si une ressource donnée est disponible. ### Spécification -Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) +Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md index efb4ff023c..fc161d7c3c 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md +++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han --- ### Introduction -Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : +Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : <a href="mailto:webmaster@example.com">Webmestre</a> @@ -15,19 +15,19 @@ Les gestionnaires de protocoles web permettent à des applications web de partic ### Enregistrement -La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : +La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail"); -Où les paramètres sont : +Où les paramètres sont : - Le protocole. -- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. +- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. - Le nom du gestionnaire de protocole tel que présenté à l'utilisateur. -Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification : +Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :  @@ -64,14 +64,14 @@ Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la p <title>Exemple de gestionnaire de protocole web — test</title> </head> <body> - <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> + <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> </body> </html> ``` ### Traitement -La phase suivante est le traitement de l'action. Le navigateur extrait le `href` du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL : +La phase suivante est le traitement de l'action. Le navigateur extrait le `href` du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL : http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole @@ -96,9 +96,9 @@ if ( isset ( $_GET["value"] ) ) { </head> <body> <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1> - <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> + <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> <textarea> -<?php echo(urldecode($value)) ?> +<?php echo(urldecode($value)) ?> </textarea> </body> </html> diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md index 567bbfb8da..44894ffd3d 100644 --- a/files/fr/web/api/navigator/sendbeacon/index.md +++ b/files/fr/web/api/navigator/sendbeacon/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Navigator/sendBeacon --- {{APIRef("HTML DOM")}} -La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. +La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. ## Syntaxe @@ -23,28 +23,28 @@ La méthode **`navigator.sendBeacon()`** peut être utilisée pour transfér ### Paramètres - `url` - - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. + - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. <!----> - `donnees` - - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. + - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. ### Valeurs de retour -La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). +La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). ## Description -Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. +Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. -Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. +Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. -Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. +Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation. -L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. +L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -57,9 +57,9 @@ function enregistrerDonnees() { } ``` -C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! +C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! -L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. +L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -82,4 +82,4 @@ function enregistrerDonnees() { ## Voir aussi - {{domxref("navigator", "navigator")}} -- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) +- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) diff --git a/files/fr/web/api/navigator/serviceworker/index.md b/files/fr/web/api/navigator/serviceworker/index.md index 2ecbc2d5e0..eb5ffde123 100644 --- a/files/fr/web/api/navigator/serviceworker/index.md +++ b/files/fr/web/api/navigator/serviceworker/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Navigator/serviceWorker --- {{APIRef("Service Workers API")}} -Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). +Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). ## syntaxe @@ -48,4 +48,4 @@ Le code ci-dessous vérifie si le navigateur supporte les service workers. ## Voir aussi - [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) -- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) diff --git a/files/fr/web/api/navigator/share/index.md b/files/fr/web/api/navigator/share/index.md index 7e2679be73..7b0055e0c7 100644 --- a/files/fr/web/api/navigator/share/index.md +++ b/files/fr/web/api/navigator/share/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/share --- {{APIRef("HTML DOM")}}{{SeeCompatTable}} -La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera `undefined`. +La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera `undefined`. ## Syntax @@ -14,21 +14,21 @@ La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de ### Paramètres - _data_ - - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : + - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : <!----> -- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. -- `text`: Un {{domxref("USVString")}} représentant le texte à partager. -- `title`: Un {{domxref("USVString")}} représentant le titre à partager. +- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. +- `text`: Un {{domxref("USVString")}} représentant le texte à partager. +- `title`: Un {{domxref("USVString")}} représentant le titre à partager. <!----> ### Valeur retournée -Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. +Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. -Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. +Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. ## Examples diff --git a/files/fr/web/api/network_information_api/index.md b/files/fr/web/api/network_information_api/index.md index 4cce43d77b..44fbb7d98d 100644 --- a/files/fr/web/api/network_information_api/index.md +++ b/files/fr/web/api/network_information_api/index.md @@ -39,8 +39,8 @@ let preloadVideo = true; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.effectiveType === 'cellular') { - preloadVideo = false; - } + preloadVideo = false; + } } ``` diff --git a/files/fr/web/api/node/appendchild/index.md b/files/fr/web/api/node/appendchild/index.md index c71ba507b3..214732ff24 100644 --- a/files/fr/web/api/node/appendchild/index.md +++ b/files/fr/web/api/node/appendchild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/appendChild --- {{APIRef("DOM")}} -La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). +La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec `cloneNode` ne seront pas automatiquement synchronisées. diff --git a/files/fr/web/api/node/baseuri/index.md b/files/fr/web/api/node/baseuri/index.md index cbecf41d24..d9641e27da 100644 --- a/files/fr/web/api/node/baseuri/index.md +++ b/files/fr/web/api/node/baseuri/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Node/baseURI La propriété en lecture seule **`Node.baseURI`** renvoie l'URL de base absolue d'un noeud. -L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. +L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. -En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. +En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. ## Syntaxe @@ -45,7 +45,7 @@ Vous pouvez utiliser `{{domxref("document")}}.baseURI` pour obtenir l'URL de bas L'URL de base d'un _element_ en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud. -Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. +Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. Vous pouvez utiliser `{{domxref("element")}}.baseURI` pour obtenir l'URL de base d'un élément. diff --git a/files/fr/web/api/node/childnodes/index.md b/files/fr/web/api/node/childnodes/index.md index 4482d18e89..2abbdf1d4c 100644 --- a/files/fr/web/api/node/childnodes/index.md +++ b/files/fr/web/api/node/childnodes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Node/childNodes --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. +La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. ## Syntaxe @@ -48,9 +48,9 @@ if (parg.hasChildNodes()) { Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple `elementNodeReference.childNodes[1].nodeName` pour obtenir son nom, etc.) -L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). +L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). -`childNodes` inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place. +`childNodes` inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place. diff --git a/files/fr/web/api/node/clonenode/index.md b/files/fr/web/api/node/clonenode/index.md index ca70a18cb3..c71153856b 100644 --- a/files/fr/web/api/node/clonenode/index.md +++ b/files/fr/web/api/node/clonenode/index.md @@ -24,9 +24,9 @@ La méthode **`Node.cloneNode()`** renvoie une copie du nœud sur lequel elle a - deep _{{optional_inline}} (profondeur)_ - : `true` (_vrai_) si les enfants du noeud doivent aussi être clonés ou `false` (_faux_) si seul le noeud spécifié doit l'être. -> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. +> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. > -> Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond. +> Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond. ## Exemple @@ -48,14 +48,14 @@ Si `deep` est évalué à `true`, le sous-arbre entier est copié également (y Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus. -Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. +Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. ### Spécification | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | +| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | | {{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/comparedocumentposition/index.md b/files/fr/web/api/node/comparedocumentposition/index.md index 7607849fb8..248023dbe9 100644 --- a/files/fr/web/api/node/comparedocumentposition/index.md +++ b/files/fr/web/api/node/comparedocumentposition/index.md @@ -49,7 +49,7 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWI | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/contains/index.md b/files/fr/web/api/node/contains/index.md index ae386427c2..add72ee901 100644 --- a/files/fr/web/api/node/contains/index.md +++ b/files/fr/web/api/node/contains/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Node/contains ## Exemple -Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. +Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. ```js function isInPage(node) { diff --git a/files/fr/web/api/node/firstchild/index.md b/files/fr/web/api/node/firstchild/index.md index 02a1edd488..3b2321f020 100644 --- a/files/fr/web/api/node/firstchild/index.md +++ b/files/fr/web/api/node/firstchild/index.md @@ -32,7 +32,7 @@ Cet exemple montre l'utilisation de `firstChild` et la manière dont les nœuds </script> ``` -Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes \<p> et \<span>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. +Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes \<p> et \<span>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. Un autre nœud `#text` est inséré entre les balises de fermeture \</span> et \</p>. @@ -47,9 +47,9 @@ Si ces espaces sont retirés du code source, les nœuds `#text` n'apparaîtront </script> ``` -À présent, l'alerte affichera « SPAN ». +À présent, l'alerte affichera « SPAN ». -Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. +Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. ## Spécification diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md index 624d732fe0..0deb6f089c 100644 --- a/files/fr/web/api/node/index.md +++ b/files/fr/web/api/node/index.md @@ -38,9 +38,9 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.lastChild")}} {{readonlyInline}} - : Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou `null` s'il n'a pas d'enfant. - {{DOMxRef("Node.nextSibling")}} {{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.nodeName")}} {{readonlyInline}} - - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. + - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. - {{DOMxRef("Node.nodeType")}}{{readonlyInline}} - : Retourne un `unsigned short` (_non signé court_) représentant le type du nœud. Les valeurs possibles sont : @@ -62,13 +62,13 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.nodeValue")}} - : Retourne / définit la valeur du nœud courant. - {{DOMxRef("Node.ownerDocument")}}{{readonlyInline}} - - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . + - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . - {{DOMxRef("Node.parentNode")}}{{readonlyInline}} - : Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne `null` . - {{DOMxRef("Node.parentElement")}}{{readonlyInline}} - - : Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un {{domxref("Element")}} , cette propriété retourne `null`. + - : Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un {{domxref("Element")}} , cette propriété retourne `null`. - {{DOMxRef("Node.previousSibling")}}{{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.textContent")}} - : Retourne / définit le contenu textuel d'un élément et de tous ses descendants. @@ -77,20 +77,20 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. ### Propriétés obsolètes - {{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}} - - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. + - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. > **Note :** Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}} - {{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}} - - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. + - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. -> **Note :** Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} +> **Note :** Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} - {{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}} - - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. -- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} + - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. +- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} - : Un {{Interface("nsIPrincipal")}} représentant le nœud principal. -- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} +- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} - : Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}. ## Méthodes @@ -127,7 +127,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.normalize()")}} - : Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide). - {{DOMxRef("Node.removeChild()")}} - - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. + - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. - {{DOMxRef("Node.replaceChild()")}} - : Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre. @@ -142,7 +142,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{domxref("Node.isSupported()")}} {{obsolete_inline}} - : Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique. - {{domxref("Node.setUserData()")}} {{obsolete_inline}} - - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. + - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. ## Exemples @@ -211,8 +211,8 @@ document.body.removeAll(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#interface-node', 'Node')}} | {{Spec2('DOM WHATWG')}} | Supprime les propriétés suivantes : `attributes`, `namespaceURI`, `prefix`, et `localName`. Supprime les méthodes suivantes : `isSupported()`, `hasAttributes()`, `getFeature()`, `setUserData()`, et `getUserData()`. | -| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | -| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | +| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | +| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | | {{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md index a04b17248d..129022a2dd 100644 --- a/files/fr/web/api/node/insertbefore/index.md +++ b/files/fr/web/api/node/insertbefore/index.md @@ -93,7 +93,7 @@ parentDiv.insertBefore(sp1, sp2) Il n'existe pas de méthode `insertAfter()`. Il peut être émulé avec une combinaison des méthodes `insertBefore()` et [`Node.nextSibling`](/fr/docs/Web/API/Node/nextSibling). -Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : +Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : ```js parentDiv.insertBefore(sp1, sp2.nextSibling); diff --git a/files/fr/web/api/node/isconnected/index.md b/files/fr/web/api/node/isconnected/index.md index 3ffaaa50de..0f5c8ca2ad 100644 --- a/files/fr/web/api/node/isconnected/index.md +++ b/files/fr/web/api/node/isconnected/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isConnected --- {{APIRef("DOM")}} -La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. +La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. ## Syntaxe diff --git a/files/fr/web/api/node/isdefaultnamespace/index.md b/files/fr/web/api/node/isdefaultnamespace/index.md index 4e1fe3058e..14699719d2 100644 --- a/files/fr/web/api/node/isdefaultnamespace/index.md +++ b/files/fr/web/api/node/isdefaultnamespace/index.md @@ -31,4 +31,4 @@ alert(el.isDefaultNamespace(XULNS)); // true ## Spécification - [DOM Level 3 Core: isDefaultNamespace](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace) -- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) +- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index 3afb00dfe7..fd4a5b792c 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} -La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds. +La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds. ## Syntaxe @@ -59,7 +59,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 5b57ac5cbb..662e808cd2 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -31,12 +31,12 @@ Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le ```css hidden #output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; } ``` diff --git a/files/fr/web/api/node/issupported/index.md b/files/fr/web/api/node/issupported/index.md index d59dab5a7b..e6af404bab 100644 --- a/files/fr/web/api/node/issupported/index.md +++ b/files/fr/web/api/node/issupported/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isSupported --- {{APIRef("DOM")}}{{obsolete_header}} -La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique. +La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique. ### Syntaxe @@ -19,9 +19,9 @@ La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","b ### Paramètres - `feature` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. - `version` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur `true`. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur `true`. ## Exemple diff --git a/files/fr/web/api/node/nextsibling/index.md b/files/fr/web/api/node/nextsibling/index.md index 19e0ddb762..85f26ed2f7 100644 --- a/files/fr/web/api/node/nextsibling/index.md +++ b/files/fr/web/api/node/nextsibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/nextSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. +La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. ## Syntaxe diff --git a/files/fr/web/api/node/nodename/index.md b/files/fr/web/api/node/nodename/index.md index ef15c51fc1..adb89ad540 100644 --- a/files/fr/web/api/node/nodename/index.md +++ b/files/fr/web/api/node/nodename/index.md @@ -36,18 +36,18 @@ Les valeurs retournées pour les différents types de noeuds sont : ## Exemple -Avec le balisage suivant : +Avec le balisage suivant : <div id="d1">hello world</div> <input type="text" id="t"/> -et le script suivant : +et le script suivant : var div1 = document.getElementById("d1"); var text_field = document.getElementById("t"); text_field.value = div1.nodeName; -En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). +En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). Notez que la propriété [`tagName`](fr/DOM/element.tagName) aurait pu être uilisée à la place, puisque `nodeName` a la même valeur que `tagName` pour un élément. Souvenez vous cependant que `nodeName` renverra `#text` pour les nœuds texte tandis que `tagName` renverra `undefined`. diff --git a/files/fr/web/api/node/nodetype/index.md b/files/fr/web/api/node/nodetype/index.md index 082ae1bd03..f1f530769a 100644 --- a/files/fr/web/api/node/nodetype/index.md +++ b/files/fr/web/api/node/nodetype/index.md @@ -27,7 +27,7 @@ Renvoie un entier (_integer_) qui spécifie le type du noeud ; les valeurs possi | Constante | Valeur | Description | | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | -| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | +| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | | `Node.TEXT_NODE` | `3` | Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}. | | `Node.PROCESSING_INSTRUCTION_NODE` | `7` | Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration `<?xml-stylesheet ... ?>`. | | `Node.COMMENT_NODE` | `8` | Un noeud {{domxref("Comment")}}. | diff --git a/files/fr/web/api/node/nodevalue/index.md b/files/fr/web/api/node/nodevalue/index.md index 294ed8619a..123f49d6d7 100644 --- a/files/fr/web/api/node/nodevalue/index.md +++ b/files/fr/web/api/node/nodevalue/index.md @@ -22,7 +22,7 @@ La propriété **`Node.nodeValue`** renvoie ou définit la valeur du nœud coura Pour le document lui-même, `nodeValue` renvoie `null`. Pour des nœuds texte, de commentaires et CDATA, `nodeValue` renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut. -Le tableau suivant montre les valeurs de retour pour différents types de nœuds : +Le tableau suivant montre les valeurs de retour pour différents types de nœuds : <table> <tbody> diff --git a/files/fr/web/api/node/normalize/index.md b/files/fr/web/api/node/normalize/index.md index 4864a1278a..9c2bc0a57d 100644 --- a/files/fr/web/api/node/normalize/index.md +++ b/files/fr/web/api/node/normalize/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Node/normalize ## Résumé -Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents. +Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents. ## Syntaxe diff --git a/files/fr/web/api/node/ownerdocument/index.md b/files/fr/web/api/node/ownerdocument/index.md index 83c9698497..19343692c8 100644 --- a/files/fr/web/api/node/ownerdocument/index.md +++ b/files/fr/web/api/node/ownerdocument/index.md @@ -36,7 +36,7 @@ L'objet `document` renvoyé par cette propriété est l'objet principal avec leq | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM3 Core")}} | Pas de changement | | {{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM2 Core")}} | Définition initiale. | diff --git a/files/fr/web/api/node/parentelement/index.md b/files/fr/web/api/node/parentelement/index.md index 66d50067d3..b8c25760ae 100644 --- a/files/fr/web/api/node/parentelement/index.md +++ b/files/fr/web/api/node/parentelement/index.md @@ -9,7 +9,7 @@ tags: - parent translation_of: Web/API/Node/parentElement --- -{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. +{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. ## Syntaxe diff --git a/files/fr/web/api/node/parentnode/index.md b/files/fr/web/api/node/parentnode/index.md index d4de4fde06..84a79eaf56 100644 --- a/files/fr/web/api/node/parentnode/index.md +++ b/files/fr/web/api/node/parentnode/index.md @@ -17,13 +17,13 @@ La propriété en lecture seule **parentNode** renvoie le parent du nœud spéci parentNode = node.parentNode -`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. +`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. ## Exemple ```js if (node.parentNode) { - // supprime un noeud de l'arbre, + // supprime un noeud de l'arbre, // sauf s'il a déjà été supprimé node.parentNode.removeChild(node); } diff --git a/files/fr/web/api/node/previoussibling/index.md b/files/fr/web/api/node/previoussibling/index.md index 4b1e499e59..f5fe908369 100644 --- a/files/fr/web/api/node/previoussibling/index.md +++ b/files/fr/web/api/node/previoussibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/previousSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. +La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. ## Syntaxe diff --git a/files/fr/web/api/node/removechild/index.md b/files/fr/web/api/node/removechild/index.md index d5835511c4..0fb6db41af 100644 --- a/files/fr/web/api/node/removechild/index.md +++ b/files/fr/web/api/node/removechild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/removeChild --- {{ ApiRef("DOM") }} -La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. +La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. ## Syntaxe @@ -24,15 +24,15 @@ La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et r - `node` est le nœud parent de `child`. - `oldchild` conserve une référence au nœud enfant retiré. `oldchild` === `child`. -Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet `ancienEnfant`_._ +Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet `ancienEnfant`_._ -Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. +Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. Si `child` n'est pas un enfant du nœud `element`, la méthode provoque une exception. Une exception sera aussi lancée dans le cas où le nœud `child` est bien un enfant du nœud `element` au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'évènement invoqué dans la cadre d'une tentative de suppression du nœud `element` (comme `blur`). -La méthode peut lever une exception de deux façons : +La méthode peut lever une exception de deux façons : -1. Si `enfant` était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :`` +1. Si `enfant` était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :`` `Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node`. 2. si l'`enfant` n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante : `Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.` diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md index 0b195eaa7a..d521450f1f 100644 --- a/files/fr/web/api/node/textcontent/index.md +++ b/files/fr/web/api/node/textcontent/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/textContent --- {{APIRef("DOM")}} -La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. +La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. ## Syntaxe @@ -39,14 +39,14 @@ Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'i ## Exemple - // Étant donné le fragment de HTML suivant : + // Étant donné le fragment de HTML suivant : // <div id="divA">Ceci est un <span>exemple de</span> texte</div> - // On obtient le contenu textuel : + // On obtient le contenu textuel : var text = document.getElementById("divA").textContent; // |text| vaut "Ceci est un exemple de texte". - // On définit le contenu textuel : + // On définit le contenu textuel : document.getElementById("divA").textContent = "Ceci est un exemple de texte"; // Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div> @@ -85,7 +85,7 @@ if (Object.defineProperty | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------- | | {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Pas de changement de DOM4 | -| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/nodefilter/index.md b/files/fr/web/api/nodefilter/index.md index c6eb155b62..625317986f 100644 --- a/files/fr/web/api/nodefilter/index.md +++ b/files/fr/web/api/nodefilter/index.md @@ -104,7 +104,7 @@ while ((node = nodeIterator.nextNode())) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.md b/files/fr/web/api/nodeiterator/expandentityreferences/index.md index 974f253391..869a01615f 100644 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.md +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/NodeIterator/expandEntityReferences La propriété en lecture seule **`NodeIterator.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}. -Si cette valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("NodeIterator.whatToShow")}} et le filtre associé. +Si cette valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("NodeIterator.whatToShow")}} et le filtre associé. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/index.md b/files/fr/web/api/nodeiterator/index.md index e38aed5afe..b45b920adc 100644 --- a/files/fr/web/api/nodeiterator/index.md +++ b/files/fr/web/api/nodeiterator/index.md @@ -154,7 +154,7 @@ _Cette interface n'hérite d'aucune méthode._ - {{domxref("NodeIterator.previousNode()")}} - : Renvoie le noeud {{domxref("Node")}} précédent dans le document ou `null` s'il n'y en a aucun. - {{domxref("NodeIterator.nextNode()")}} - - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. + - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. ## Spécifications diff --git a/files/fr/web/api/nodeiterator/nextnode/index.md b/files/fr/web/api/nodeiterator/nextnode/index.md index ff4676c9fb..8fbbc190c6 100644 --- a/files/fr/web/api/nodeiterator/nextnode/index.md +++ b/files/fr/web/api/nodeiterator/nextnode/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/NodeIterator/nextNode --- {{APIRef("DOM")}} -La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. +La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. Cette méthode retourne `null` quand il n'y a plus de nœuds dans l'ensemble. -Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. +Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.md b/files/fr/web/api/nodeiterator/whattoshow/index.md index 1cd3450056..d334d4aedc 100644 --- a/files/fr/web/api/nodeiterator/whattoshow/index.md +++ b/files/fr/web/api/nodeiterator/whattoshow/index.md @@ -143,7 +143,7 @@ var nodeIterator = document.createNodeIterator( false ); if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) || - (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // nodeIterator affichera les commentaires } ``` diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md index d74ee8bccb..77666b9e3d 100644 --- a/files/fr/web/api/nodelist/foreach/index.md +++ b/files/fr/web/api/nodelist/foreach/index.md @@ -70,11 +70,11 @@ Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les nav ```js if (window.NodeList && !NodeList.prototype.forEach) { - NodeList.prototype.forEach = function (callback, thisArg) { + NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; - for (var i = 0; i < this.length; i++) { - callback.call(thisArg, this[i], i, this); - } + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } }; } ``` diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md index 5f326cadc6..5bd3fb1583 100644 --- a/files/fr/web/api/nodelist/index.md +++ b/files/fr/web/api/nodelist/index.md @@ -17,7 +17,7 @@ Les objets **`NodeList`** sont des collections de nœuds comme celles retournée > > Néanmoins certains vieux navigateurs n'ont pas encore implémenté `NodeList.forEach()` ni `Array.from()`. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document). -Dans certains cas, la `NodeList` est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct : +Dans certains cas, la `NodeList` est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct : ```js var parent = document.getElementById('parent'); @@ -27,7 +27,7 @@ parent.appendChild(document.createElement('div')); console.log(child_nodes.length); // devrait afficher "3" ``` -Dans d'autres cas, la `NodeList` est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une `NodeList` statique. +Dans d'autres cas, la `NodeList` est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une `NodeList` statique. Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste. @@ -39,9 +39,9 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Méthodes - {{domxref("NodeList.item()")}} - - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). + - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). - {{domxref("NodeList.entries()")}} - - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. - {{domxref("NodeList.forEach()")}} - : exécute une fonction fournie une fois par élément `NodeList`. - {{domxref("NodeList.keys()")}} @@ -51,7 +51,7 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Exemple -Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : +Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : ```js for (var i = 0; i < myNodeList.length; ++i) { @@ -85,9 +85,9 @@ Array.prototype.forEach.call(list, function (item) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | -| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | +| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | +| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | | {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/notification/data/index.md b/files/fr/web/api/notification/data/index.md index efddb360b1..2e0bbd45e2 100644 --- a/files/fr/web/api/notification/data/index.md +++ b/files/fr/web/api/notification/data/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Notification/data --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. +La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification. diff --git a/files/fr/web/api/notification/permission/index.md b/files/fr/web/api/notification/permission/index.md index fca52d13af..c610dc31c8 100644 --- a/files/fr/web/api/notification/permission/index.md +++ b/files/fr/web/api/notification/permission/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Notification/permission --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. +La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. ## Syntaxe diff --git a/files/fr/web/api/notification/silent/index.md b/files/fr/web/api/notification/silent/index.md index 5f31229f85..b621c5e510 100644 --- a/files/fr/web/api/notification/silent/index.md +++ b/files/fr/web/api/notification/silent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Notification/silent --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`silent`** de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. +La propriété en lecture seule **`silent`** de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. ## Syntaxe diff --git a/files/fr/web/api/notificationevent/index.md b/files/fr/web/api/notificationevent/index.md index 0b2803c583..8592ef1417 100644 --- a/files/fr/web/api/notificationevent/index.md +++ b/files/fr/web/api/notificationevent/index.md @@ -63,7 +63,7 @@ self.addEventListener('notificationclick', function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | +| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | > **Note :** Cette interface est définie au sein de [l'API Notifications](/fr/docs/Web/API/Notifications_API), mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}. diff --git a/files/fr/web/api/notifications_api/index.md b/files/fr/web/api/notifications_api/index.md index d7483eea5c..b5827d2d7e 100644 --- a/files/fr/web/api/notifications_api/index.md +++ b/files/fr/web/api/notifications_api/index.md @@ -33,7 +33,7 @@ De là, l'utilisateur peut choisir d'autoriser les notifications de cette origin > **Note :** Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé. -Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc. +Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc. En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API), pour permettre aux service worker de déclencher des notifications. diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.md b/files/fr/web/api/offlineaudiocontext/complete_event/index.md index 02711f32b5..7c0229e724 100644 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.md +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.md @@ -39,7 +39,7 @@ _Aucun_ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | ## Voir aussi diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md index e8e0cd9ec2..7cb9c5d075 100644 --- a/files/fr/web/api/offscreencanvas/index.md +++ b/files/fr/web/api/offscreencanvas/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/OffscreenCanvas --- {{APIRef("Canvas API")}} {{SeeCompatTable}} -L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). +L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). -> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. +> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. ## Constructeur - {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}} - - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. + - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. ## Propriétés @@ -36,16 +36,16 @@ L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors <!----> - {{domxref("OffscreenCanvas.toBlob()")}} - - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. + - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. <!----> - {{domxref("OffscreenCanvas.transferToImageBitmap()")}} - - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. + - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. ## Exemples -### Affichage synchrone d'images produites par un `OffscreenCanvas` +### Affichage synchrone d'images produites par un `OffscreenCanvas` Une façon d'utiliser l'API `OffscreenCanvas` est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet `OffscreenCanvas` pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert. @@ -80,9 +80,9 @@ var bitmapDeux = horsEcran.transferToImageBitmap(); deux.transferImageBitmap(bitmapDeux); ``` -### Affichage asynchrone d'images produites par un `OffscreenCanvas` +### Affichage asynchrone d'images produites par un `OffscreenCanvas` -Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. +Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. Afin de rendre les cadres visibles, vous pouvez appeler `commit()` sur ce `RenderingContext`, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original. diff --git a/files/fr/web/api/origin/index.md b/files/fr/web/api/origin/index.md index 8aab326ced..9098ab8474 100644 --- a/files/fr/web/api/origin/index.md +++ b/files/fr/web/api/origin/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. +La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. ## Syntaxe @@ -18,7 +18,7 @@ Une {{domxref("USVString")}}. ## Exemples -Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. +Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. ```js onmessage = function() { @@ -26,7 +26,7 @@ onmessage = function() { }; ``` -Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. +Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. ## Spécifications diff --git a/files/fr/web/api/oscillatornode/index.md b/files/fr/web/api/oscillatornode/index.md index 976b975a28..0be7e1d962 100644 --- a/files/fr/web/api/oscillatornode/index.md +++ b/files/fr/web/api/oscillatornode/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/OscillatorNode --- {{APIRef("Web Audio API")}} -L'interface `OscillatorNode` représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante. +L'interface `OscillatorNode` représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante. -On crée un `OscillatorNode` en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont : +On crée un `OscillatorNode` en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont : -- Nombre d'entrées : `0` -- Nombre de sorties : `1` -- Mode de calcul des canaux : `max` -- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) -- Interprétation des canaux : `speakers` +- Nombre d'entrées : `0` +- Nombre de sorties : `1` +- Mode de calcul des canaux : `max` +- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) +- Interprétation des canaux : `speakers` ## Propriétés -*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. +*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. - {{domxref("OscillatorNode.frequency")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.detune")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.type")}} - - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. + - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. ## Méthodes -_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. +_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. - {{domxref("OscillatorNode.start()")}} - : Cette méthode déclenche la lecture du son. @@ -40,7 +40,7 @@ _Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. ## Event handlers - {{domxref("OscillatorNode.onended")}} - - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. + - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. ## Exemples diff --git a/files/fr/web/api/page_visibility_api/index.md b/files/fr/web/api/page_visibility_api/index.md index a2b1d7f629..906a4ceea6 100644 --- a/files/fr/web/api/page_visibility_api/index.md +++ b/files/fr/web/api/page_visibility_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Page_Visibility_API --- {{DefaultAPISidebar("Page Visibility API")}} -**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. +**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder. @@ -17,7 +17,7 @@ L’API est particulièrement utile pour économiser des ressources. Elle donne ### Cas d’utilisation -Quelques exemples : +Quelques exemples : - Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page. - Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible. @@ -28,11 +28,11 @@ Historiquement, les développeurs ont utilisé des solutions de remplacement imp ### Politiques de performance des pages en arrière-plan -En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : +En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : - Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie. - Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir [_Reasons for delays longer than specified_](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified) pour plus de détails. -- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : +- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : - Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes. - Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir _[Reasons for delays longer than specified](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified)_). Pour Chrome, cette valeur est de 10 secondes. @@ -40,7 +40,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so - Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé. - Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome. -- Certaines opérations sont exemptées de retardement : +- Certaines opérations sont exemptées de retardement : - Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées. - Les applications avec des connexions en temps réel ([WebSockets](/en-US/docs/Web/API/WebSockets_API) et [WebRTC](/en-US/docs/Web/API/WebRTC_API)), afin d’éviter que ces connexions soient fermées par timeout. @@ -50,7 +50,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so Voir [l’exemple en direct](http://daniemon.com/tech/webapps/page-visibility/) (vidéo avec son). -Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : +Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : ```js // Set the name of the hidden property and the change event for visibility @@ -105,12 +105,12 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden = - : Retourne `true` si la page est dans un état considéré comme masqué à l’utilisateur, et `false` dans le cas contraire. - {{domxref("document.visibilityState")}} - - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : + - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : - - `visible` : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée. - - `hidden` : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif. - - `prerender` : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour `document.hidden`). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel. - - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. + - `visible` : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée. + - `hidden` : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif. + - `prerender` : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour `document.hidden`). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel. + - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. ```js //startSimulation and pauseSimulation defined elsewhere diff --git a/files/fr/web/api/pagetransitionevent/index.md b/files/fr/web/api/pagetransitionevent/index.md index ca4c52d177..b2e78f119a 100644 --- a/files/fr/web/api/pagetransitionevent/index.md +++ b/files/fr/web/api/pagetransitionevent/index.md @@ -11,7 +11,7 @@ Les évènements de transition de page sont émis quand une page web est chargé ### Hiérarchie d’héritage -[Event](/fr/docs/Web/API/Event) PageTransitionEvent +[Event](/fr/docs/Web/API/Event) PageTransitionEvent ## Exemple @@ -39,13 +39,13 @@ function myFunction(event) { ## Membres -L’objet **PageTransitionEvent** possède les types de membres suivants : +L’objet **PageTransitionEvent** possède les types de membres suivants : - [Propriétés](#Propriétés) ### Propriétés -L’objet **PageTransitionEvent** possède les propriétés suivantes : +L’objet **PageTransitionEvent** possède les propriétés suivantes : <table> <tbody> diff --git a/files/fr/web/api/passwordcredential/name/index.md b/files/fr/web/api/passwordcredential/name/index.md index f48ae976df..5e0b59442a 100644 --- a/files/fr/web/api/passwordcredential/name/index.md +++ b/files/fr/web/api/passwordcredential/name/index.md @@ -19,7 +19,7 @@ La propriété **`name`** est accessible en lecture seule et est rattachée à l ### Valeur -A {{domxref("USVString")}} containing a name. +A {{domxref("USVString")}} containing a name. ## Spécifications diff --git a/files/fr/web/api/payment_request_api/index.md b/files/fr/web/api/payment_request_api/index.md index e1c2b7a15e..381309d1c0 100644 --- a/files/fr/web/api/payment_request_api/index.md +++ b/files/fr/web/api/payment_request_api/index.md @@ -5,64 +5,64 @@ translation_of: Web/API/Payment_Request_API --- {{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}} -L'API *Payment Request* fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand. +L'API *Payment Request* fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand. ## Concepts et usages de l'API _Payment Request_ De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'**API <i lang="en">Payment Request</i>** a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi disparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisatrice ou l'utilisateur, qui sont transmises au marchand sans nécessiter de formulaire HTML. -Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : +Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : -- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. -- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. -- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. -- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. -- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. +- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. +- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. +- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. +- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. +- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. -Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. +Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. -Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). +Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). -> **Note :** L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}. +> **Note :** L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}. ## Interfaces - {{domxref('PaymentAddress')}} - - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. + - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. - {{domxref('PaymentRequest')}} - - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. + - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. - {{domxref('PaymentRequestEvent')}} - - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. + - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. - {{domxref('PaymentRequestUpdateEvent')}} - : Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur. - {{domxref('PaymentMethodChangeEvent')}} - - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). + - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). - {{domxref('PaymentResponse')}} - : Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement. - {{domxref('MerchantValidationEvent')}} - - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). + - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). <!----> ## Dictionnaires - {{domxref("AddressErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. - {{domxref("PayerErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. - {{domxref("PaymentDetailsUpdate")}} - - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. + - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. -### Dictionnaires connexes pour la specification *Basic Card* +### Dictionnaires connexes pour la specification *Basic Card* - {{domxref("BasicCardChangeDetails")}} - - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. + - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. - {{domxref("BasicCardErrors")}} - - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. + - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. - {{domxref('BasicCardRequest')}} - : Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement. - {{domxref('BasicCardResponse')}} - - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. + - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. ## Spécifications diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md index 2cefdb109d..d49ab08b7a 100644 --- a/files/fr/web/api/periodicwave/index.md +++ b/files/fr/web/api/periodicwave/index.md @@ -15,14 +15,14 @@ translation_of: Web/API/PeriodicWave --- {{ APIRef("Web Audio API") }} -L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. +L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. -`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. +`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. ## Constructeur - {{domxref("PeriodicWave.PeriodicWave()")}} - - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. ## Propriétés diff --git a/files/fr/web/api/plugin/index.md b/files/fr/web/api/plugin/index.md index 0e892cd5fb..d18c059ce8 100644 --- a/files/fr/web/api/plugin/index.md +++ b/files/fr/web/api/plugin/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Plugin --- {{ApiRef("HTML DOM")}} -L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. +L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. -> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. +> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. ## Propriétés @@ -22,15 +22,15 @@ L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/ - : Une description lisible du plugin. - {{domxref("Plugin.filename")}} {{readonlyinline}} - : Le nom de fichier du fichier plugin. -- {{domxref("Plugin.name")}} {{readonlyinline}} +- {{domxref("Plugin.name")}} {{readonlyinline}} - : Le nom du plugin. -- {{domxref("Plugin.version")}} {{readonlyinline}} +- {{domxref("Plugin.version")}} {{readonlyinline}} - : Le numéro de version du plugin, en chaîne de caractères. ## Méthodes - {{domxref("Plugin.item")}} - - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. + - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. - {{domxref("Plugin.namedItem")}} - : Renvoie le type MIME d'un élément pris en charge. diff --git a/files/fr/web/api/pointer_events/index.md b/files/fr/web/api/pointer_events/index.md index 2e2d206b70..b3ce13352e 100644 --- a/files/fr/web/api/pointer_events/index.md +++ b/files/fr/web/api/pointer_events/index.md @@ -16,7 +16,7 @@ Les événements de pointeur sont des événements DOM déclenché pour tout pé Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement. -Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. +Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. ## Terminologie @@ -44,7 +44,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE - {{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement. - {{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact. - {{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact. -- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. +- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y. - {{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X. - {{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.) @@ -52,7 +52,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE ### Types d'événements et gestionnaires d'événements globaux -Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. +Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. | Event | On Event Handler | Description | | ---------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md index 77c78cc8c4..b050d7844c 100644 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md @@ -18,7 +18,7 @@ Cet exemple montre comment détecter les gestes de _pinch/zoom_ (pincer/zoomer), ## Exemple -Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. +Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. ### Définir la cible du toucher diff --git a/files/fr/web/api/pointer_lock_api/index.md b/files/fr/web/api/pointer_lock_api/index.md index ed011ba852..c4fa733725 100644 --- a/files/fr/web/api/pointer_lock_api/index.md +++ b/files/fr/web/api/pointer_lock_api/index.md @@ -13,7 +13,7 @@ original_slug: WebAPI/Pointer_Lock --- {{DefaultAPISidebar("Pointer Lock API")}} -**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. +**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions. @@ -21,9 +21,9 @@ Comme Pointer lock continue de déclencher des évènements même quand le curse ## Concepts de base -Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants : +Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants : -- Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique. +- Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique. - Ne se limite pas aux bordures du navigateur ou de l'écran. - Continue de déclencher des évènements peu importe l'état des boutons de la souris. - Cache le curseur. @@ -34,7 +34,7 @@ Cette section fournit une brève description de chaque propriété et méthode a ### requestPointerLock() -L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: +L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: ```js canvas.requestPointerLock = canvas.requestPointerLock || @@ -46,9 +46,9 @@ canvas.requestPointerLock() ### pointerLockElement et exitPointerLock() -L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. +L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. -La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. +La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. Voici un exemple d'utilisation de `pointerLockElement`: diff --git a/files/fr/web/api/pointerevent/index.md b/files/fr/web/api/pointerevent/index.md index 06c014d904..3e058ee7e2 100644 --- a/files/fr/web/api/pointerevent/index.md +++ b/files/fr/web/api/pointerevent/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/PointerEvent --- {{ APIRef("Pointer Events") }} -L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. +L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. -Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. +Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. -Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. +Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. ## Constructeurs @@ -29,13 +29,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr - {{ domxref('PointerEvent.pressure')}} {{readonlyInline}} - : La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}} - - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. + - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y. - {{ domxref('PointerEvent.tiltY')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X. - {{ domxref('PointerEvent.twist')}} {{readonlyInline}} - - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. + - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. - {{ domxref('PointerEvent.pointerType')}} {{readonlyInline}} - : Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.) - {{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}} @@ -44,13 +44,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr ## Methods - {{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}} - - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. + - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. ## Types d'événéments de pointeur -L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément. +L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément. -> **Note :** Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée. +> **Note :** Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée. - {{event('pointerover')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément. @@ -69,7 +69,7 @@ L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer - {{event('pointerleave')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur. - {{event('gotpointercapture')}} - - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. + - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. - {{event('lostpointercapture')}} - : Cet événément est déclenché après qu'un pointeur ait relâché sa capture. diff --git a/files/fr/web/api/proximity_events/index.md b/files/fr/web/api/proximity_events/index.md index d5b2e749e8..1a147524b8 100644 --- a/files/fr/web/api/proximity_events/index.md +++ b/files/fr/web/api/proximity_events/index.md @@ -16,14 +16,14 @@ Les événements de proximité permettent, simplement, de savoir lorsqu'un utili ## Événements de proximité -Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. +Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. Cet événement peut être capturé en utilisant un objet au niveau `window` en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}. Une fois qu'il a été capturé, l'événement donne accès à différentes informations : - L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}. -- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. +- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. ## Exemple diff --git a/files/fr/web/api/push_api/index.md b/files/fr/web/api/push_api/index.md index dc7b9d2f2c..ba70b101a8 100644 --- a/files/fr/web/api/push_api/index.md +++ b/files/fr/web/api/push_api/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Push_API --- {{DefaultAPISidebar("Push API")}}{{SeeCompatTable}} -L' **API Push** donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement \[de l'utilisateur] avec du nouveau contenu au moment opportun. +L' **API Push** donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement \[de l'utilisateur] avec du nouveau contenu au moment opportun. > **Note :** Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à [Simple Push](/fr/docs/Web/API/Simple_Push_API). diff --git a/files/fr/web/api/pushevent/index.md b/files/fr/web/api/pushevent/index.md index a1364ab73c..7c190dfbd2 100644 --- a/files/fr/web/api/pushevent/index.md +++ b/files/fr/web/api/pushevent/index.md @@ -39,29 +39,29 @@ L'exemple suivant prends les données du `PushEvent` et les affiche sur tous les ```js self.addEventListener('push', function(event) { - if (!(self.Notification && self.notification.permission === 'granted')) { - return; - } - - var data = {}; - if (event.data) { - data = event.data.json(); - } - var title = data.title || "Something Has Happened"; - var message = data.message || "Here's something you might want to check out."; - var icon = "images/new-notification.png"; - - var notification = new Notification(title, { - body: message, - tag: 'simple-push-demo-notification', - icon: icon - }); - - notification.addEventListener('click', function() { - if (clients.openWindow) { - clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); - } - }); + if (!(self.Notification && self.notification.permission === 'granted')) { + return; + } + + var data = {}; + if (event.data) { + data = event.data.json(); + } + var title = data.title || "Something Has Happened"; + var message = data.message || "Here's something you might want to check out."; + var icon = "images/new-notification.png"; + + var notification = new Notification(title, { + body: message, + tag: 'simple-push-demo-notification', + icon: icon + }); + + notification.addEventListener('click', function() { + if (clients.openWindow) { + clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); + } + }); }); ``` diff --git a/files/fr/web/api/queuemicrotask/index.md b/files/fr/web/api/queuemicrotask/index.md index 5fb7f410eb..71d5c61121 100644 --- a/files/fr/web/api/queuemicrotask/index.md +++ b/files/fr/web/api/queuemicrotask/index.md @@ -25,13 +25,13 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask --- {{APIRef("HTML DOM")}} -La méthode **`queueMicrotask()`**, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur. +La méthode **`queueMicrotask()`**, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur. La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur. -Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). +Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). -L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. +L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu. @@ -44,7 +44,7 @@ Les micro-tâches sont particulièrement utiles pour les librairies et les frame ### Paramètres - `function` - - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. + - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. ### Valeur de retour @@ -58,7 +58,7 @@ self.queueMicrotask(() => { }) ``` -Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : +Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : ```js MyElement.prototype.loadData = function (url) { @@ -79,7 +79,7 @@ MyElement.prototype.loadData = function (url) { ## Lorsque queueMicrotask() n'est pas disponible -Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. +Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. ```js if (typeof window.queueMicrotask !== "function") { diff --git a/files/fr/web/api/range/createcontextualfragment/index.md b/files/fr/web/api/range/createcontextualfragment/index.md index d5e9c573f2..51d37771ef 100644 --- a/files/fr/web/api/range/createcontextualfragment/index.md +++ b/files/fr/web/api/range/createcontextualfragment/index.md @@ -3,7 +3,7 @@ title: Range.createContextualFragment() slug: Web/API/Range/createContextualFragment translation_of: Web/API/Range/createContextualFragment --- -La méthode **`Range.createContextualFragment()`** retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. +La méthode **`Range.createContextualFragment()`** retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. ## Syntaxe diff --git a/files/fr/web/api/range/detach/index.md b/files/fr/web/api/range/detach/index.md index c02aaa937a..4f5ae53467 100644 --- a/files/fr/web/api/range/detach/index.md +++ b/files/fr/web/api/range/detach/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Range/detach --- {{ApiRef("DOM")}} -La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. +La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. ## Syntaxe diff --git a/files/fr/web/api/range/selectnode/index.md b/files/fr/web/api/range/selectnode/index.md index eca4135b5a..ae46f4752f 100644 --- a/files/fr/web/api/range/selectnode/index.md +++ b/files/fr/web/api/range/selectnode/index.md @@ -19,7 +19,7 @@ La méthode `Range.selectNode()` définit le {{domxref ("Range")}} destiné à c ### Paramètres - _noeudDeReference_ - - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. + - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. ## Exemple diff --git a/files/fr/web/api/range/setstart/index.md b/files/fr/web/api/range/setstart/index.md index 6eb71bd8ca..15f73cf216 100644 --- a/files/fr/web/api/range/setstart/index.md +++ b/files/fr/web/api/range/setstart/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Range/setStart La méthode **`Range.setStart()`** définit la position de départ d'un objet [`Range`](/fr/docs/Web/API/Range). -Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. +Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée. diff --git a/files/fr/web/api/range/surroundcontents/index.md b/files/fr/web/api/range/surroundcontents/index.md index e157cd42f2..f422e72dcc 100644 --- a/files/fr/web/api/range/surroundcontents/index.md +++ b/files/fr/web/api/range/surroundcontents/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Range/surroundContents La méthode **`Range.surroundContents()`** déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du `range` spécifié. -Cette méthode est à peu près équivalente à : +Cette méthode est à peu près équivalente à : ```js newNode.appendChild(range.extractContents()); @@ -16,7 +16,7 @@ range.insertNode(newNode) Après déplacement, les bornes du `range` incluent `newNode`. -Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera. +Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera. ## Syntaxe diff --git a/files/fr/web/api/request/mode/index.md b/files/fr/web/api/request/mode/index.md index bc19ee5f28..f10d557e03 100644 --- a/files/fr/web/api/request/mode/index.md +++ b/files/fr/web/api/request/mode/index.md @@ -22,7 +22,7 @@ Une valeur {{domxref("RequestMode")}}. ## Exemple -Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: +Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: ```js var myRequest = new Request('flowers.jpg'); diff --git a/files/fr/web/api/request/request/index.md b/files/fr/web/api/request/request/index.md index b4b2872f72..bcc43cdab0 100644 --- a/files/fr/web/api/request/request/index.md +++ b/files/fr/web/api/request/request/index.md @@ -41,7 +41,7 @@ Le constructeur **`Request()`** crée un nouvel objet {{domxref("Request")}}. - `credentials`: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : `omit`, `same-origin`, ou `include`. La valeur par défaut est `omit`. Dans Chrome, la valeur par défaut est `same-origin` avant Chrome 47 et `include` à partir de Chrome 47. - `cache`: Le [mode de cache](/en-US/docs/Web/API/Request/cache) que vous voulez utiliser pour la requête. - `redirect`: Le mode de redirection à utiliser : `follow`, `error`, ou `manual`. Dans Chrome, le défaut est `manual` avant Chrome 47 et `follow` à partir de Chrome 47. - - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. + - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. - `integrity`: Contient la valeur d'[intégrité de la sous ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la requête (par ex.., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`). ## Erreurs @@ -93,7 +93,7 @@ Notez que vos pouvez aussi passer l'objet init dans l'appel à `fetch` pour obte ```js fetch(maRequete,monInit).then(function(reponse) { - ... + ... }); ``` diff --git a/files/fr/web/api/rtciceserver/index.md b/files/fr/web/api/rtciceserver/index.md index 9b51e6d84e..7adc70aea0 100644 --- a/files/fr/web/api/rtciceserver/index.md +++ b/files/fr/web/api/rtciceserver/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/RTCIceServer --- {{APIRef("WebRTC")}} -RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. +RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. ## Propriétés - {{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}} - - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. + - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. - {{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. + - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. - {{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}} - - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. + - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. - {{domxref("RTCIceServer.urls", "urls")}} - - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. + - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. - {{domxref("RTCIceServer.username", "username")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. + - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. -Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation. +Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation. > **Note :** Les anciennes versions de la spécification WebRTC incluent une propriété `url` au lieu de `urls`; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous. ## Constantes -### Enumeration RTCIceCredentialType +### Enumeration RTCIceCredentialType -L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. +L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. | Constante | Description | | ------------ | ----------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md index 8ef8585440..70f4712c1e 100644 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md @@ -46,10 +46,10 @@ Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire ```js var restartConfig = { iceServers: [{ - urls: "turn:asia.myturnserver.net", - username: "allie@oopcode.com", - credential: "topsecretpassword" - }] + urls: "turn:asia.myturnserver.net", + username: "allie@oopcode.com", + credential: "topsecretpassword" + }] }; myPeerConnection.setConfiguration(restartConfig); diff --git a/files/fr/web/api/screen_capture_api/index.md b/files/fr/web/api/screen_capture_api/index.md index 114b3d1d4a..a838aec0c6 100644 --- a/files/fr/web/api/screen_capture_api/index.md +++ b/files/fr/web/api/screen_capture_api/index.md @@ -42,7 +42,7 @@ L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une mé ### Interface MediaDevices - {{domxref("MediaDevices.getDisplayMedia()")}} - - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. + - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. ## Ajouts aux dictionnaires actuels @@ -51,7 +51,7 @@ L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit pa ### MediaTrackConstraints - {{domxref("MediaTrackConstraints.cursor")}} - - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. + - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. - {{domxref("MediaTrackConstraints.displaySurface")}} - : Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être `application`, `browser`, `monitor`, ou `window`. - {{domxref("MediaTrackConstraints.logicalSurface")}} @@ -86,7 +86,7 @@ Le dictionnaire suivant est difinit par l'API Screen Capture. ## Validation de Feature Policy -{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: +{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: ```html <iframe allow="display-capture" src="/some-other-document.html"> diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md index 0fe6ac1161..41e4baf91e 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md @@ -71,8 +71,8 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code >{{domxref("AudioContext.createScriptProcessor()")}}. - Noter que <code>le<em> AudioBuffer</em></code - ><code> retourné</code><em><code> </code></em>est seulement valide + Noter que le <em><code>AudioBuffer</em></code + > retourné est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em> </p> </td> @@ -99,7 +99,7 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilités navigateur diff --git a/files/fr/web/api/selection/collapse/index.md b/files/fr/web/api/selection/collapse/index.md index e965caa639..a9481d0ede 100644 --- a/files/fr/web/api/selection/collapse/index.md +++ b/files/fr/web/api/selection/collapse/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Selection/collapse --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. +La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. ## Syntaxe @@ -26,7 +26,7 @@ La méthode **`Selection.collapse()`** positionne la sélection en cours en un <!----> - _`offset`_ - - : Indique la position du curseur d'édition dans `parentNode`. + - : Indique la position du curseur d'édition dans `parentNode`. ## Exemples @@ -40,7 +40,7 @@ window.getSelection().collapse(body,0); | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | -| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | +| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | | {{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}} | {{Spec2('HTML Editing')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/selection/index.md b/files/fr/web/api/selection/index.md index a06b3a3314..62be1ee258 100644 --- a/files/fr/web/api/selection/index.md +++ b/files/fr/web/api/selection/index.md @@ -11,7 +11,7 @@ La classe de l'objet retourné par [`window.getSelection()`](Window/getSelection ### Description -Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : +Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : range = sel.getRangeAt(0); @@ -25,47 +25,47 @@ L'appel de la méthode [`toString()`](Selection/toString) renvoie le texte conte Autres mots clés utilisés dans cette section. - anchor (ancre) - - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. + - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. - focus (focus) - - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. + - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. - range (plage) - - : Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. + - : Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. ### Propriétés - [anchorNode](/fr/docs/Web/API/Selection/anchorNode) - : Renvoie le nœud d'où la sélection commence. - [anchorOffset](/fr/docs/Web/API/Selection/anchorOffset) - - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». + - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». - [focusNode](/fr/docs/Web/API/Selection/focusNode) - : Renvoie le nœud où la sélection se termine. - [focusOffset](/fr/docs/Web/API/Selection/focusOffset) - - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». + - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». - [isCollapsed](/fr/docs/Web/API/Selection/isCollapsed) - : Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position. - [rangeCount](/fr/docs/Web/API/Selection/rangeCount) - - : Renvoie le nombre de « plages » dans la sélection. + - : Renvoie le nombre de « plages » dans la sélection. ### Méthodes - [getRangeAt](/fr/docs/Web/API/Selection/getRangeAt) - - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. + - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. - [collapse](/fr/docs/Web/API/Selection/collapse) - : Réduit la sélection courante à un simple point. - [extend](/fr/docs/Web/API/Selection/extend) - - : Déplace le « focus » de la sélection à un endroit spécifié. + - : Déplace le « focus » de la sélection à un endroit spécifié. - [collapseToStart](/fr/docs/Web/API/Selection/collapseToStart) - - : Déplace le « focus » de la sélection au même point que l'« ancre ». + - : Déplace le « focus » de la sélection au même point que l'« ancre ». - [collapseToEnd](/fr/docs/Web/API/Selection/collapseToEnd) - - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. + - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. - [selectAllChildren](/fr/docs/Web/API/Selection/selectAllChildren) - : Ajoute tous les enfants d'un nœud spécifié à la sélection. - [addRange](/fr/docs/Web/API/Selection/addRange) - : Un objet range devant être ajouté à la sélection. - [removeRange](/fr/docs/Web/API/Selection/removeRange) - - : Supprime une « plage » de la sélection. + - : Supprime une « plage » de la sélection. - [removeAllRanges](/fr/docs/Web/API/Selection/removeAllRanges) - - : Supprime toutes les « plages » de la sélection. + - : Supprime toutes les « plages » de la sélection. - [deleteFromDocument](/fr/docs/Web/API/Selection/deleteFromDocument) - : Efface le contenu de la sélection du document. - [selectionLanguageChange](/fr/docs/Web/API/Selection/selectionLanguageChange) @@ -81,7 +81,7 @@ Autres mots clés utilisés dans cette section. ### Voir aussi -[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) +[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) ### Liens externes diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md index 23ce054696..83e8641441 100644 --- a/files/fr/web/api/selection/tostring/index.md +++ b/files/fr/web/api/selection/tostring/index.md @@ -25,7 +25,7 @@ Aucun. Cette méthode renvoie le texte sélectionné. -En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : +En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : alert(window.getSelection()) // Appel automatique alert(window.getSelection().toString()) // Appel explicite diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md index e9c5ff2191..7d9f8085e8 100644 --- a/files/fr/web/api/server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/index.md @@ -6,7 +6,7 @@ tags: - TopicStub translation_of: Web/API/Server-sent_events --- -Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données. +Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données. ## Documentation @@ -23,7 +23,7 @@ Habituellement, une page web doit envoyer une requête au serveur pour obtenir d ## Rubriques connexes -- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) +- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) ## Voir également diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md index aefa72a9a4..bfa9fc228e 100644 --- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md @@ -14,23 +14,23 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events --- {{DefaultAPISidebar("Server Sent Events")}} -Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. +Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. ## Recevoir des évènements du serveur -L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : +L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : ```js const evtSource = new EventSource("ssedemo.php"); ``` -Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : +Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : ```js const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); ``` -Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : +Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : ```js evtSource.onmessage = function(event) { @@ -44,7 +44,7 @@ evtSource.onmessage = function(event) { Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ `event` attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document. -On peut aussi écouter les évènements avec `addEventListener()` : +On peut aussi écouter les évènements avec `addEventListener()` : ```js evtSource.addEventListener("ping", function(event) { @@ -55,7 +55,7 @@ evtSource.addEventListener("ping", function(event) { }); ``` -Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. +Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. > **Attention :** **Lorsque HTTP/2 n'est pas utilisé**, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée _par le navigateur_ et vaut 6 pour chaque origine (voir les bugs [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) et [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896)). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur `www.example1.com`, 6 autres pour tous les onglets sur `www.example2.com` (voir cette réponse [Stack Overflow](https://stackoverflow.com/a/5326159/1905229)). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut. @@ -63,7 +63,7 @@ Ce fragment de code est similaire au précédent, mais sera appelé automatiquem Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME `text/event-stream`. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (`\n`). Pour plus de détails sur le format du flux d'évènements, voir [la section ci-après](#event_stream_format). -Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : +Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : ```php date_default_timezone_set("America/New_York"); @@ -100,7 +100,7 @@ while (true) { } ``` -Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. +Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée. @@ -126,15 +126,15 @@ evtSource.close(); ## Format du flux d'évènements -Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré. +Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré. > **Note :** Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte. -Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ. +Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ. ### Champs -Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : +Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : - `event` - : Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser `addEventListener()` pour écouter des évènements nommés. Le gestionnaire `onmessage` est appelé si aucun nom d'évènement n'est spécifié dans un message. diff --git a/files/fr/web/api/service_worker_api/index.md b/files/fr/web/api/service_worker_api/index.md index d8d0dc95ba..00935f63f5 100644 --- a/files/fr/web/api/service_worker_api/index.md +++ b/files/fr/web/api/service_worker_api/index.md @@ -101,7 +101,7 @@ Les service workers sont aussi destinés à être utilisés pour des choses tell - {{domxref("NotificationEvent") }} - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface `NotificationEvent` représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. - {{domxref("PeriodicSyncEvent")}} {{non-standard_inline}} - - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. + - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. - {{domxref("PeriodicSyncManager")}} {{non-standard_inline}} - : Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}. - {{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}} diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.md b/files/fr/web/api/service_worker_api/using_service_workers/index.md index ee19f610f3..18a42761de 100644 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.md +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.md @@ -27,13 +27,13 @@ Les service workers devraient finalement résoudre ces problèmes. La syntaxe du ## Préparatifs aux Service Workers -De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : +De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : -- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. +- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. - **Chrome Canary** : rendez-vous sur `chrome://flags` et activer `experimental-web-platform-features`; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.) - **Opera** : rendez-vous sur `opera://flags` et activer `Support for ServiceWorker`; redémarrer le navigateur. -Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. +Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. ## Architecture de base @@ -80,7 +80,7 @@ myFunction().then(function(value) { Dans le premier exemple, on doit attendre que l'exécution de `myFunction()` retourne `value` avant de poursuivre l'exécution de tout autre code. Dans le second exemple, `myFunction()` retourne une promesse pour `value`, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de `then` s'exécutera, de manière asynchrone. -Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. +Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du [test de promesses](https://github.com/mdn/promises-test) pour le code source, ou [le voir fonctionner en direct](https://mdn.github.io/promises-test/).) @@ -127,18 +127,18 @@ imgLoad('myLittleVader.jpg').then(function(response) { }); ``` -A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. +A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. Le tout se déroule de manière asynchrone. -> **Note :** il est possible d'assembler des appels de promesse, par exemple: +> **Note :** il est possible d'assembler des appels de promesse, par exemple: > `myPromise().then(success, failure).then(success).catch(failure);` > **Note :** pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/). ## Démo de service workers -Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté ! +Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !  @@ -196,35 +196,35 @@ Après l'enregistrement du service worker, le navigateur tente d'installer puis L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total. -> **Note :** L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). +> **Note :** L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). Commençons cette section par l'examen d'un exemple de code — c'est le [premier bloc présent dans le service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18): ```js this.addEventListener('install', function(event) { - event.waitUntil( - caches.open('v1').then(function(cache) { - return cache.addAll([ - '/sw-test/', - '/sw-test/index.html', - '/sw-test/style.css', - '/sw-test/app.js', - '/sw-test/image-list.js', - '/sw-test/star-wars-logo.jpg', - '/sw-test/gallery/', - '/sw-test/gallery/bountyHunters.jpg', - '/sw-test/gallery/myLittleVader.jpg', - '/sw-test/gallery/snowTroopers.jpg' - ]); - }) - ); + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); }); ``` -1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. +1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. 2. A l'intérieur de `waitUntil()` la méthode [`caches.open()`](/en-US/docs/Web/API/CacheStorage/open) est utilisée pour créer un nouveau cache appelé `v1`, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même `addAll()` sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache. 3. Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient. -4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) +4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) > **Note :** [localStorage](/fr/docs/Web/API/Web_Storage_API) fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers. @@ -256,7 +256,7 @@ this.addEventListener('fetch', function(event) { }); ``` -`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. +`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. Voici quelques autres options disponibles pour que la magie opère (voir la [documentation de l'API Fetch](/fr/docs/Web/API/Fetch_API) pour plus d'informations sur les objets [`Request`](/fr/docs/Web/API/Request) et [`Response`](/fr/docs/Web/API/Response)). @@ -332,7 +332,7 @@ this.addEventListener('fetch', function(event) { Ici on retourne la requête réseau par défaut au moyen de `return fetch(event.request)`, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant `caches.open('v1')`; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, `cache.put()` est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de `event.request`, et la réponse est alors clonée avec `response.clone()` et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert. -Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. +Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose : @@ -347,8 +347,8 @@ this.addEventListener('fetch', function(event) { }); }); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - }) + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) ); }); ``` @@ -361,18 +361,18 @@ Ce code utilise un chaînage de promesses plus standard et retourne la réponse ```js this.addEventListener('fetch', function(event) { - var response; - event.respondWith(caches.match(event.request).catch(function() { - return fetch(event.request); - }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); - }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - })); + var response; + event.respondWith(caches.match(event.request).catch(function() { + return fetch(event.request); + .then(functio + response = r; + cac + c + }); + return response.clone(); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + })); }); ``` diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md index ee79380e4f..26f509022a 100644 --- a/files/fr/web/api/serviceworker/index.md +++ b/files/fr/web/api/serviceworker/index.md @@ -13,65 +13,65 @@ translation_of: Web/API/ServiceWorker --- {{APIRef("Service Workers API")}} -L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. +L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. -Un objet `ServiceWorker` est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée). +Un objet `ServiceWorker` est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée). -L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. +L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. ## Propriétés -_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ +_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ - {{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}} - - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. + - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. - {{domxref("ServiceWorker.state")}} {{readonlyinline}} - : Retourne le status du service worker. Il retourne l'une des valeurs suivantes : `installing`, `installed,` `activating`, `activated`, or `redundant`. ### Gestionnaires d'évènements - {{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}} - - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. + - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Méthodes -L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* +L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* ## Exemples -Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker - .register('service-worker.js', { - scope: './' - }) - .then(({ installing, waiting, active }) => { - let serviceWorker - if (installing) { - serviceWorker = installing - document.querySelector('#kind').textContent = 'installé' - } else if (waiting) { - serviceWorker = waiting - document.querySelector('#kind').textContent = 'en attente' - } else if (active) { - serviceWorker = active - document.querySelector('#kind').textContent = 'actif' - } - if (serviceWorker) { - // logState(serviceWorker.state); - serviceWorker.addEventListener('statechange', (e) => { - // logState(e.target.state); - }) - } - }) - .catch((error) => { - // L'enregistrement s'est mal déroulé. Le fichier service-worker.js - // est peut-être indisponible ou contient une erreur. - }) + navigator.serviceWorker + .register('service-worker.js', { + scope: './' + }) + .then(({ installing, waiting, active }) => { + let serviceWorker + if (installing) { + serviceWorker = installing + document.querySelector('#kind').textContent = 'installé' + else if (waiting) { + serviceWorker = waiting + document.querySelector + } else if (active) { + serviceWorker = active + document.querySelector('#kind').textContent = 'actif' + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', (e) => { + // logState(e.target.state); + }) + } + }) + .catch((error) => { + // L'enregistrement s'est mal déroulé. Le fichier service-worker.js + // est peut-être indisponible ou contient une erreur. + }) } else { - // Le navigateur ne supporte pas les service workers. + // Le navigateur ne supporte pas les service workers. } ``` diff --git a/files/fr/web/api/serviceworker/onstatechange/index.md b/files/fr/web/api/serviceworker/onstatechange/index.md index 4089f7a837..f499cdf8bb 100644 --- a/files/fr/web/api/serviceworker/onstatechange/index.md +++ b/files/fr/web/api/serviceworker/onstatechange/index.md @@ -9,16 +9,16 @@ translation_of: Web/API/ServiceWorker/onstatechange --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. +Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Syntax ServiceWorker.onstatechange = function(statechangeevent) { ... } - ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) + ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) ## Examples -Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js var serviceWorker; @@ -41,16 +41,16 @@ if (serviceWorker) { } ``` -Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : +Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : ```js navigator.serviceWorker.register(..).then(function(swr) { swr.installing.state == "installé" swr.installing.onstatechange = function() { swr.installing == null; - // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement + // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement // statechange est mis en queue, pendant que le worker sous jacent est peut être en - // état d'attente et sera immédiatement activé si possible. + // état d'attente et sera immédiatement activé si possible. } }) ``` diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md index c7de9a158f..ebf579b6f5 100644 --- a/files/fr/web/api/serviceworkercontainer/index.md +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -12,7 +12,7 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo ## Propriétés - {{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}} - - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. + - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. <!----> @@ -33,9 +33,9 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo - {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} - : Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un `scriptURL` donné. - {{domxref("ServiceWorkerContainer.getRegistration()")}} - - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). - {{domxref("ServiceWorkerContainer.getRegistrations()")}} - - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). ## Exemples @@ -75,6 +75,6 @@ if ('serviceWorker' in navigator) { - [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Service workers : exemple basique](https://github.com/mdn/sw-test) -- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md index c7c1d85c5f..fa991f40ca 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.md +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -49,18 +49,18 @@ L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). L ```js if ('serviceWorker' in navigator) { - // Register a service worker hosted at the root of the - // site using the default scope. - navigator.serviceWorker.register('/sw.js').then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` @@ -70,37 +70,37 @@ Sinon, si ce code était inclus dans une page à `example.com/product/descriptio ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: './' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: './' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut. -Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. +Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` diff --git a/files/fr/web/api/serviceworkerglobalscope/index.md b/files/fr/web/api/serviceworkerglobalscope/index.md index c16273acd7..6ec1286699 100644 --- a/files/fr/web/api/serviceworkerglobalscope/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker. -Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. +Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}. diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md index c5e9dbe111..209e6ee190 100644 --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick La propriété **`ServiceWorkerGlobalScope.onnotificationclick`** est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}. -Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet `Notification` lui-même. +Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet `Notification` lui-même. > **Note :** Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur. diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md index 9fa64a83ab..af9c89e7f5 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.md +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -25,7 +25,7 @@ Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | -| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | +| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md index 7e9aaa2230..beb503bdea 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md @@ -19,7 +19,7 @@ La méthode **`getNotifications()`** de l'interface {{domxref ("ServiceWorkerReg ## Syntaxe - serviceWorkerRegistration.getNotifications(options) + serviceWorkerRegistration.getNotifications(options) .then(function(notificationsList) { ... }) ### Paramétres diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md index a261d8632d..e44da329db 100644 --- a/files/fr/web/api/serviceworkerregistration/index.md +++ b/files/fr/web/api/serviceworkerregistration/index.md @@ -37,57 +37,57 @@ _Also implements properties from its parent interface,_ {{domxref("EventTarget") - {{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}} - : Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration. - {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. -- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} - - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. + - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. +- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} + - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. ### Unimplemented properties - {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. + - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. ### Event handlers - {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}} - - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. + - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. ## Methods _Also implements methods from its parent interface,_ {{domxref("EventTarget")}}. - {{domxref("ServiceWorkerRegistration.getNotifications()")}} - - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. + - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. - {{domxref("ServiceWorkerRegistration.showNotification()")}} - : Displays the notification with the requested title. - {{domxref("ServiceWorkerRegistration.update()")}} - : Checks the server for an updated version of the service worker without consulting caches. - {{domxref("ServiceWorkerRegistration.unregister()")}} - - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. + - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. ## Examples -In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. +In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('/sw.js') - .then(function(registration) { + navigator.serviceWorker.register('/sw.js') + .then(function(registration) { registration.addEventListener('updatefound', function() { - // If updatefound is fired, it means that there's - // a new service worker being installed. - var installingWorker = registration.installing; - console.log('A new service worker is being installed:', - installingWorker); - - // You can listen for changes to the installing service worker's - // state via installingWorker.onstatechange - }); - }) - .catch(function(error) { - console.log('Service worker registration failed:', error); - }); + // If updatefound is fired, it means that there's + // a new service worker being installed. + var installingWorker = registration.installing; + console.log('A new service worker is being installed:', + installingWorker); + + // You can listen for changes to the installing service worker's + // state via installingWorker.onstatechange + }); + }) + .catch(function(error) { + console.log('Service worker registration failed:', error); + }); } else { - console.log('Service workers are not supported.'); + console.log('Service workers are not supported.'); } ``` @@ -97,8 +97,8 @@ if ('serviceWorker' in navigator) { | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}} | {{Spec2('Service Workers')}} | Initial definition. | | {{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}} | {{Spec2('Push API')}} | Adds the {{domxref("PushManager","pushManager")}} property. | -| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | -| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | +| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | +| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | ## Browser compatibility diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md index 99530c86a4..2b618c5922 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -20,7 +20,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi ## Syntaxe - serviceWorkerRegistration.showNotification(title, [options]) + serviceWorkerRegistration.showNotification(title, [options]) ### Paramètres @@ -32,7 +32,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `actions`: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: - - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. + - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. - title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur. - icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action. @@ -49,7 +49,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`. - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux. - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification. - - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. + - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. ### Valeur de retour diff --git a/files/fr/web/api/settimeout/index.md b/files/fr/web/api/settimeout/index.md index cf40ee8e6e..cb7eba51c6 100644 --- a/files/fr/web/api/settimeout/index.md +++ b/files/fr/web/api/settimeout/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- {{APIRef("HTML DOM")}} -La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. +La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. ## Syntaxe @@ -36,7 +36,7 @@ La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorke La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à `setTimeout()`. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné. -Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. +Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à `setTimeout()` ou `setInterval()` pour un même objet (une fenêtre ou un _worker_). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants. @@ -210,7 +210,7 @@ setTimeout(monTableau.maMéthode, 1500, '1'); // affiche "undefined" après 1.5 seconde ``` -La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. +La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. ```js setTimeout.call(monTableau, monTableau.maMéthode, 2000); @@ -277,7 +277,7 @@ setTimeout(cb, 0); setInterval(f, 0); ``` -Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel, Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). +Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel, Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). [Par le passé](http://code.google.com/p/chromium/issues/detail?id=792#c10), certains navigateurs implémentaient cette limite différemment (pour les appels à `setInterval()` quelle que soit leur provenance ou lorsqu'un appel `setTimeout()` était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication. @@ -291,9 +291,9 @@ Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postM Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs. -Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). +Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). -Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf. {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement. +Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf. {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement. > **Note :** Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan. diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md index dc36979082..c03b0f11c9 100644 --- a/files/fr/web/api/sharedworker/index.md +++ b/files/fr/web/api/sharedworker/index.md @@ -38,7 +38,7 @@ _Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente ## Exemple -Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. +Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. L'extrait de code suivant illustre la création d'un objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci : @@ -71,7 +71,7 @@ first.onchange = function() { } ``` -Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. +Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. ```js onconnect = function(e) { diff --git a/files/fr/web/api/sharedworker/port/index.md b/files/fr/web/api/sharedworker/port/index.md index 8e25c1c7f8..79d9c7b727 100644 --- a/files/fr/web/api/sharedworker/port/index.md +++ b/files/fr/web/api/sharedworker/port/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/SharedWorker/port --- {{APIRef("Web Workers API")}} -La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. +La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. ## Syntaxe diff --git a/files/fr/web/api/speechrecognition/index.md b/files/fr/web/api/speechrecognition/index.md index 6e11ac7426..4be66b9949 100644 --- a/files/fr/web/api/speechrecognition/index.md +++ b/files/fr/web/api/speechrecognition/index.md @@ -19,11 +19,11 @@ translation_of: Web/API/SpeechRecognition - {{domxref("SpeechRecognition.grammars")}} - : Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par `SpeechRecognition`. - {{domxref("SpeechRecognition.lang")}} - - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. + - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. - {{domxref("SpeechRecognition.continuous")}} - : Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (`false`.) - {{domxref("SpeechRecognition.interimResults")}} - - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) + - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) - {{domxref("SpeechRecognition.maxAlternatives")}} - : Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1. - {{domxref("SpeechRecognition.serviceURI")}} @@ -69,7 +69,7 @@ _`SpeechRecognition` also inherits methods from its parent interface, {{domxref( In our simple [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the `SpeechRecognition` instance using the {{domxref("SpeechRecognition.grammars")}} property. -After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. +After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. ```js var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' diff --git a/files/fr/web/api/speechsynthesisutterance/index.md b/files/fr/web/api/speechsynthesisutterance/index.md index 02dc3bd9e6..5f9c15cf29 100644 --- a/files/fr/web/api/speechsynthesisutterance/index.md +++ b/files/fr/web/api/speechsynthesisutterance/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/SpeechSynthesisUtterance --- {{APIRef("Web Speech API")}}{{SeeCompatTable}} -L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). +L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). ## Constructor - {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}} - - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. + - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. ## Properties -_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ +_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ - {{domxref("SpeechSynthesisUtterance.lang")}} - : Gets and sets the language of the utterance. @@ -48,16 +48,16 @@ _`SpeechSynthesisUtterance` hérite également des propriétés de son interfac ## Examples -Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. -Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. +Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. +Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. L'utilisateur pourra ensuite choisir la voix qu'il souhaite. -À l'intérieur du handler `inputForm.onsubmit` : +À l'intérieur du handler `inputForm.onsubmit` : -- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); -- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; -- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; -- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} +- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); +- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; +- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; +- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} ```js var synth = window.speechSynthesis; diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md index a4540f154c..a26f7064e8 100644 --- a/files/fr/web/api/storage/clear/index.md +++ b/files/fr/web/api/storage/clear/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/clear --- {{APIRef("Web Storage API")}} -La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. +La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. ## Syntaxe @@ -37,7 +37,7 @@ function peuplerLeStockage() { } ``` -> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. +> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. ## Spécifications @@ -51,4 +51,4 @@ function peuplerLeStockage() { ## Voir aussi -- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md index 4563ca4cca..1900adb9d7 100644 --- a/files/fr/web/api/storage/getitem/index.md +++ b/files/fr/web/api/storage/getitem/index.md @@ -58,4 +58,4 @@ function setStyles() { ## Voir aussi -[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md index 4ae4cf6946..5cba3a3196 100644 --- a/files/fr/web/api/storage/index.md +++ b/files/fr/web/api/storage/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/Storage --- {{APIRef("Web Storage API")}} -L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. +L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. -Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. +Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. ## Propriétés - {{domxref("Storage.length")}} {{readonlyInline}} - - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. + - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. ## Méthodes - {{domxref("Storage.key()")}} - - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. + - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. <!----> @@ -38,7 +38,7 @@ Si vous voulez manipuler le stockage de session pour un domaine, appelez la mét ## Exemples -Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. +Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. ```js if(!localStorage.getItem('bgcolor')) { diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md index f108c70da3..fb2632992b 100644 --- a/files/fr/web/api/storage/key/index.md +++ b/files/fr/web/api/storage/key/index.md @@ -35,7 +35,7 @@ La fonction suivante parcours les éléments présents dans le local storage. function forEachKey(callback) { for (var i = 0; i < localStorage.length; i++) { callback(localStorage.key(i)); - } + } } ``` @@ -43,11 +43,11 @@ function forEachKey(callback) { ## Autre exemple -La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. +La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. ```js for (var i = 0; i < localStorage.length; i++) { - console.log(localStorage.getItem(localStorage.key(i))); + console.log(localStorage.getItem(localStorage.key(i))); } ``` @@ -55,7 +55,7 @@ for (var i = 0; i < localStorage.length; i++) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md index a2ea7ab711..31157d56ef 100644 --- a/files/fr/web/api/storage/length/index.md +++ b/files/fr/web/api/storage/length/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/length --- {{APIRef("Web Storage API")}} -La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. +La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. ## Syntaxe @@ -35,13 +35,13 @@ function populateStorage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md index add1e6b954..ee22988713 100644 --- a/files/fr/web/api/storage/removeitem/index.md +++ b/files/fr/web/api/storage/removeitem/index.md @@ -45,11 +45,11 @@ Nous pouvons également faire ceci avec le stockage de session. ```js function populateStorage() { - sessionStorage.setItem('bgcolor', 'red'); - sessionStorage.setItem('font', 'Helvetica'); + sessionStorage.setItem('bgcolor', 'red'); + sessionStorage.setItem('font', 'Helvetica'); sessionStorage.setItem('image', 'myCat.png'); - sessionStorage.removeItem('image'); + sessionStorage.removeItem('image'); } ``` @@ -67,4 +67,4 @@ function populateStorage() { ## Voir aussi -[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md index da20ec878f..d3d89d6225 100644 --- a/files/fr/web/api/storage/setitem/index.md +++ b/files/fr/web/api/storage/setitem/index.md @@ -34,7 +34,7 @@ Par conséquent les développeurs devraient être sûrs de toujours de **systém ## Exemple -La fonction suivante crée trois éléments à l'intérieur du stockage local. +La fonction suivante crée trois éléments à l'intérieur du stockage local. ```js function remplissageStockage() { @@ -44,7 +44,7 @@ function remplissageStockage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md index daf154aa13..4e395f8c2f 100644 --- a/files/fr/web/api/storage_api/index.md +++ b/files/fr/web/api/storage_api/index.md @@ -9,15 +9,15 @@ Le standard _Storage_ définit un système de stockage commun et partagé utilis {{AvailableInWorkers}} -Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : - -- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; -- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; -- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; -- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; -- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; -- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; -- [les données de notification](/fr/docs/Web/API/Notifications_API) ; +Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : + +- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; +- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; +- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; +- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; +- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; +- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; +- [les données de notification](/fr/docs/Web/API/Notifications_API) ; - d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues. ## Unités de stockage de site @@ -26,15 +26,15 @@ Le système de stockage de site décrit par le standard Storage, et avec lequel  -- L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota. -- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. -- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. +- L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota. +- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. +- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. -Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. +Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. ## Modes de boîte -Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : +Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : - `"best-effort"` - : L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, _mais n’avertira pas l’utilisateur ou l’utilisatrice_ si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage. @@ -49,13 +49,13 @@ Si le site ou l’application a la permission sur la fonctionnalité **`"persist > **Note :** Voir [Using the Permissions API](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API) pour plus de détails sur l’obtension et la gestion des permissions. -Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle. +Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle. -Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. +Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. ## Estimations de quota et d’usage -L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : +L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : - Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting. - La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées. @@ -63,11 +63,11 @@ L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la qua Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités. -Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : +Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : ```js navigator.storage.estimate().then(estimate => { - // estimate.quota est le quota estimé + // estimate.quota est le quota estimé // estimate.usage est le nombre estimé d’octets utilisés }); ``` diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 4ed46854c1..63afb6307c 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -17,7 +17,7 @@ Aucun. ### Valeur de retour -Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. +Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. Il est possible de constater que le `quota` varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite. diff --git a/files/fr/web/api/storagemanager/index.md b/files/fr/web/api/storagemanager/index.md index f2d0ddb3ae..ed5b77ee5e 100644 --- a/files/fr/web/api/storagemanager/index.md +++ b/files/fr/web/api/storagemanager/index.md @@ -25,9 +25,9 @@ The **`StorageManager`** interface of the the [Storage API](/en-US/docs/Web/API/ - {{domxref("StorageManager.estimate()")}} {{securecontext_inline}} - : Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin. - {{domxref("StorageManager.persist()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. - {{domxref("StorageManager.persisted()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. ## Specifications diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md index f644f15c11..bc9f3f6a71 100644 --- a/files/fr/web/api/storagemanager/persist/index.md +++ b/files/fr/web/api/storagemanager/persist/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persist().then(function(persistent) { - if (persistent) - console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); - else - console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + navigator.storage.persist().then(function(persistent) { + if (persistent) + console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); + else + console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); + }); ``` ## Spécifications diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md index 05ef2cd5df..5f80ea526f 100644 --- a/files/fr/web/api/storagemanager/persisted/index.md +++ b/files/fr/web/api/storagemanager/persisted/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persisted().then(function(persistent) { + navigator.storage.persisted().then(function(persistent) { if (persistent) console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); else console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + }); ``` ## Spécifications diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md index 437d2d3799..b6b186a2df 100644 --- a/files/fr/web/api/streams_api/index.md +++ b/files/fr/web/api/streams_api/index.md @@ -21,7 +21,7 @@ Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence L'usage basique des <i lang="en">Streams</i> s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par une [requête `fetch`](/fr/docs/Web/API/fetch) réussie peut être exposé en tant que [`ReadableStream`](/fr/docs/Web/API/ReadableStream) — vous pourrez ainsi le lire en utilisant un lecteur créé par [`ReadableStream.getReader()`](/fr/docs/Web/API/ReadableStream/getReader), l'annuler avec [`ReadableStream.cancel()`](/fr/docs/Web/API/ReadableStream/cancel), etc. -Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). +Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}. @@ -32,7 +32,7 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Readable streams - {{domxref("ReadableStream")}} - - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). + - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). - {{domxref("ReadableStreamDefaultReader")}} - : Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch). - {{domxref("ReadableStreamDefaultController")}} @@ -41,11 +41,11 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Writable streams - {{domxref("WritableStream")}} - - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. + - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. - {{domxref("WritableStreamDefaultWriter")}} - : Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible. - {{domxref("WritableStreamDefaultController")}} - - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. + - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. ### Related stream APIs and operations diff --git a/files/fr/web/api/stylesheetlist/index.md b/files/fr/web/api/stylesheetlist/index.md index 1714af3627..a89ab8a939 100644 --- a/files/fr/web/api/stylesheetlist/index.md +++ b/files/fr/web/api/stylesheetlist/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/StyleSheetList --- {{APIRef("CSSOM")}} -L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. +L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. -Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. +Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. ## Exemple diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md index 2a3b3b4098..1bb6c06418 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.md +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -26,7 +26,7 @@ Il prend en argument un identifiant pour l'algorithme de condensé et les donné ### Valeur retournée -- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. +- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. ## Algorithmes supportés diff --git a/files/fr/web/api/subtlecrypto/index.md b/files/fr/web/api/subtlecrypto/index.md index 261e638d57..c7859cee9c 100644 --- a/files/fr/web/api/subtlecrypto/index.md +++ b/files/fr/web/api/subtlecrypto/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/SubtleCrypto --- {{APIRef("Web Crypto API")}}{{SecureContext_header}} -The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. +The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. > **Attention :** This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle. > @@ -73,23 +73,23 @@ These are the functions you can use to implement security features such as priva ### Key management functions -Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. +Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. #### Generating and deriving keys -The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. +The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. The difference is that `generateKey()` will generate a new distinct key value each time you call it, while `deriveKey()` derives a key from some initial keying material. If you provide the same keying material to two separate calls to `deriveKey()`, you will get two `CryptoKey` objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data. #### Importing and exporting keys -To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. +To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. -The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. +The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. -If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". +If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". -The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. +The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. #### Storing keys diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md index d83db2e9b8..b265788bbb 100644 --- a/files/fr/web/api/svgelement/index.md +++ b/files/fr/web/api/svgelement/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/SVGElement --- ## Interface d'élément SVG -Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. +Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. ### Vue d'ensemble de l'interface @@ -41,7 +41,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du </td> </tr> <tr> - <th scope="row">Normative document</th> + <th scope="row">Normative document</th> <td> <a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" >SVG 1.1 (2nd Edition)</a @@ -83,7 +83,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément {{ SVGElement("svg") }} parent le plus près. - <code>Null</code> si l'élément est l'élément svg le plus à + <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -94,7 +94,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent - {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si + {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -104,7 +104,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du ## Méthodes -L'interface `SVGElement` ne possède aucune méthode spécifique. +L'interface `SVGElement` ne possède aucune méthode spécifique. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/svgmatrix/index.md b/files/fr/web/api/svgmatrix/index.md index a90c8251a9..1919f02d01 100644 --- a/files/fr/web/api/svgmatrix/index.md +++ b/files/fr/web/api/svgmatrix/index.md @@ -225,7 +225,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <p> Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) - atan(y/x). La direction du vecteur (x, y) détermine si la valeur + atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée. </p> <p><strong>Exceptions :</strong></p> @@ -245,7 +245,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice + Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante. </div> </td> @@ -257,7 +257,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice + Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante. </div> </td> diff --git a/files/fr/web/api/svgrectelement/index.md b/files/fr/web/api/svgrectelement/index.md index 4acf6db261..6c6c24bf22 100644 --- a/files/fr/web/api/svgrectelement/index.md +++ b/files/fr/web/api/svgrectelement/index.md @@ -15,17 +15,17 @@ _Cette interface hérite aussi des propriétés de_ _{{domxref("SVGGeometryEleme - {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} + - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. +- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné. ## Méthode diff --git a/files/fr/web/api/svgtitleelement/index.md b/files/fr/web/api/svgtitleelement/index.md index 1f3ac78830..5541b72901 100644 --- a/files/fr/web/api/svgtitleelement/index.md +++ b/files/fr/web/api/svgtitleelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/SVGTitleElement ## Interface DOM de l'élément SVG `title` -L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. +L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. ### Aperçu de l'interface @@ -48,7 +48,7 @@ L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title ## Propriétés -L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. +L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. ## Méthodes diff --git a/files/fr/web/api/syncmanager/index.md b/files/fr/web/api/syncmanager/index.md index 2bb4d1de86..004fbdbdd1 100644 --- a/files/fr/web/api/syncmanager/index.md +++ b/files/fr/web/api/syncmanager/index.md @@ -14,9 +14,9 @@ None. ## Methods - {{domxref("SyncManager.register")}} - - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} + - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} - {{domxref("SyncManager.getTags")}} - - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. + - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. ## Specifications diff --git a/files/fr/web/api/text/index.md b/files/fr/web/api/text/index.md index d12428b709..84891f45bf 100644 --- a/files/fr/web/api/text/index.md +++ b/files/fr/web/api/text/index.md @@ -8,9 +8,9 @@ translation_of: Web/API/Text --- {{ApiRef("DOM")}} -L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. +L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. -Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. +Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. {{InheritanceDiagram}} @@ -28,7 +28,7 @@ _Hérite des propriétés de son parent {{domxref("CharacterData")}}._ - {{domxref("Text.wholeText")}} {{readonlyInline}} - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le texte de tous les noeuds `Text` adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document. - {{domxref("Text.assignedSlot")}} {{readonlyinline}} - - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. + - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. ## Méthodes diff --git a/files/fr/web/api/text/splittext/index.md b/files/fr/web/api/text/splittext/index.md index 079275794c..fa55a42f87 100644 --- a/files/fr/web/api/text/splittext/index.md +++ b/files/fr/web/api/text/splittext/index.md @@ -11,7 +11,7 @@ Après la séparation, le nœud actuel contient tout le texte jusqu’à l’ind Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}. -Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. +Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. ## Syntaxe @@ -60,4 +60,4 @@ Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deu ## Voir aussi - L’interface {{domxref("Text")}} à laquelle cette méthode appartient. -- La méthode opposée : {{domxref("Node.normalize")}}. +- La méthode opposée : {{domxref("Node.normalize")}}. diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md index 6c9c867c62..c7cc289cd8 100644 --- a/files/fr/web/api/textencoder/index.md +++ b/files/fr/web/api/textencoder/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/TextEncoder **`TextEncoder`** prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/en-US/Add-ons/Code_snippets/StringView). -> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage). +> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage). > **Note :** Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans [GitHub](https://github.com/inexorabletash/text-encoding). @@ -39,66 +39,66 @@ _L'interface `TextEncoder` n'hérite d'aucune propriété._ ## Prothèse d'émulation -La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. +La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. ```js if (typeof TextEncoder === "undefined") { - TextEncoder=function TextEncoder(){}; - TextEncoder.prototype.encode = function encode(str) { - "use strict"; - var Len = str.length, resPos = -1; - // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 - // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's - // have an auto expanding length and 1.5x should be just the right balance for most uses. - var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); - for (var point=0, nextcode=0, i = 0; i !== Len; ) { - point = str.charCodeAt(i), i += 1; - if (point >= 0xD800 && point <= 0xDBFF) { - if (i === Len) { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; break; - } - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - nextcode = str.charCodeAt(i); - if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { - point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; - i += 1; - if (point > 0xffff) { - resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - continue; - } - } else { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; - } - } - if (point <= 0x007f) { - resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; - } else if (point <= 0x07ff) { - resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } else { - resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } - } - if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); - // else // IE 6-9 - resArr.length = resPos + 1; // trim off extra weight - return resArr; - }; - TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; - try { // Object.defineProperty only works on DOM prototypes in IE8 - Object.defineProperty(TextEncoder.prototype,"encoding",{ - get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; + TextEncoder=function TextEncoder(){}; + TextEncoder.prototype.encode = function encode(str) { + "use strict"; + var Len = str.length, resPos = -1; + // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 + // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's + // have an auto expanding length and 1.5x should be just the right balance for most uses. + var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); + for (var point=0, nextcode=0, i = 0; i !== Len; ) { + point = str.charCodeAt(i), i += 1; + if (point >= 0xD800 && point <= 0xDBFF) { + if (i === Len) { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; break; + } + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + nextcode = str.charCodeAt(i); + if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { + point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; + i += 1; + if (point > 0xffff) { + resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + continue; + } + e { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; + } + } + if (point <= 0x007f) { + resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; + se if (point <= 0x07ff) { + resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); + esArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0 + else { + resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + } + } + if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); + // else // IE 6-9 + resArr.length = resPos + 1; // trim off extra weight + return resArr; + }; + TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; + try { // Object.defineProperty only works on DOM prototypes in IE8 + Object.defineProperty(TextEncoder.prototype,"encoding",{ + get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; else throw TypeError("Illegal invocation");} - }); - } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } - if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; + }); + } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } + if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; } ``` diff --git a/files/fr/web/api/textencoder/textencoder/index.md b/files/fr/web/api/textencoder/textencoder/index.md index b68625b0ff..2cb8bc1577 100644 --- a/files/fr/web/api/textencoder/textencoder/index.md +++ b/files/fr/web/api/textencoder/textencoder/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/TextEncoder/TextEncoder --- {{APIRef("Encoding API")}} -Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. +Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. ## Syntaxe diff --git a/files/fr/web/api/textmetrics/index.md b/files/fr/web/api/textmetrics/index.md index 218af5eb3c..f0e977fb64 100644 --- a/files/fr/web/api/textmetrics/index.md +++ b/files/fr/web/api/textmetrics/index.md @@ -15,29 +15,29 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Propriétés - {{domxref("TextMetrics.width")}} {{readonlyInline}} - - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. + - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. - {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. - {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. ## Spécifications @@ -51,5 +51,5 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Voir aussi -- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. -- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} +- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. +- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} diff --git a/files/fr/web/api/textmetrics/width/index.md b/files/fr/web/api/textmetrics/width/index.md index 4ee47b6d47..72c26cdc69 100644 --- a/files/fr/web/api/textmetrics/width/index.md +++ b/files/fr/web/api/textmetrics/width/index.md @@ -25,7 +25,7 @@ La propriété en lecture seule **TextMetrics.width** contient en pixels CSS la <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canvas = document.getElementById("canevas"); @@ -39,7 +39,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md index 24e46891d4..17616679e1 100644 --- a/files/fr/web/api/timeranges/index.md +++ b/files/fr/web/api/timeranges/index.md @@ -17,11 +17,11 @@ translation_of: Web/API/TimeRanges {{ gecko_minversion_header("2.0") }} -L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. +L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. -Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer. +Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer. -Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). +Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). ### Propriétés @@ -39,7 +39,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- </td> <td> <p> - Le nombre de plages de temps contenues dans l'objet TimeRanges. + Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>. </p> </td> @@ -54,7 +54,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- - {{ domxref("TimeRanges.start") }} - : Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. - {{ domxref("TimeRanges.end") }} - - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. + - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. ### Spécification diff --git a/files/fr/web/api/touch_events/index.md b/files/fr/web/api/touch_events/index.md index 5fcaf9e3f0..92ed60cc86 100644 --- a/files/fr/web/api/touch_events/index.md +++ b/files/fr/web/api/touch_events/index.md @@ -27,7 +27,7 @@ Afin de fournir un support de qualité pour les interfaces tactiles, les événe - {{ domxref("TouchList") }} - : Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface. - {{ domxref("DocumentTouch") }} - - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. + - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. ## Exemple @@ -198,7 +198,7 @@ Cette section fournit quelques astuces supplémentaires pour gérer les événem ### Gérer les clics -Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) +Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) ```js function onTouch(evt) { diff --git a/files/fr/web/api/transferable/index.md b/files/fr/web/api/transferable/index.md index 0a86bfe7a1..54a9b45670 100644 --- a/files/fr/web/api/transferable/index.md +++ b/files/fr/web/api/transferable/index.md @@ -15,7 +15,7 @@ C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit > **Note :** L'interface `Transferable` n'existe plus pour longtemps. La fonctionnalité des objets `Transferable` existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu `[Transferable]` {{Glossary("WebIDL")}}) -Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. +Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. ## Propriétés diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.md b/files/fr/web/api/treewalker/expandentityreferences/index.md index 32bed4b615..2d77e919d3 100644 --- a/files/fr/web/api/treewalker/expandentityreferences/index.md +++ b/files/fr/web/api/treewalker/expandentityreferences/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/TreeWalker/expandEntityReferences La propriété en lecture seule **`TreeWalker.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}. -Si la valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("TreeWalker.whatToShow")}} et du filtre associé. +Si la valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("TreeWalker.whatToShow")}} et du filtre associé. ## Syntaxe diff --git a/files/fr/web/api/treewalker/whattoshow/index.md b/files/fr/web/api/treewalker/whattoshow/index.md index b7f4dd47c1..905ddc20ce 100644 --- a/files/fr/web/api/treewalker/whattoshow/index.md +++ b/files/fr/web/api/treewalker/whattoshow/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/TreeWalker/whatToShow --- {{APIRef("DOM")}} -La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : +La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : | Constante | Valeur numérique | Description | | --------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -42,7 +42,7 @@ var treeWalker = document.createTreeWalker( false ); if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) || - (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // treeWalker affichera des commentaires } ``` diff --git a/files/fr/web/api/uievent/detail/index.md b/files/fr/web/api/uievent/detail/index.md index 873116753a..16b4af4b3a 100644 --- a/files/fr/web/api/uievent/detail/index.md +++ b/files/fr/web/api/uievent/detail/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/UIEvent/detail Pour les événements {{event("click")}} ou {{event("dblclick")}}, `UIEvent.detail` donne le nombre de clics courant. -Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. +Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujours zéro. @@ -22,7 +22,7 @@ Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujou | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | | {{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM2 Events')}} | Première définition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/uievent/index.md b/files/fr/web/api/uievent/index.md index 2fad98cefd..47de3e8ea1 100644 --- a/files/fr/web/api/uievent/index.md +++ b/files/fr/web/api/uievent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/UIEvent L'interface **`UIEvent`** représente des évènements simples de l'interface utilisateur. -`UIEvent` dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}} soit conservée pour la compatibilité ascendante, vous devez créer un objet `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. +`UIEvent` dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}} soit conservée pour la compatibilité ascendante, vous devez créer un objet `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}. @@ -28,7 +28,7 @@ Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{dom _Cette interface hérite également des propriétés de son parent {{domxref("Event")}}._ -- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} +- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} - : {{jsxref("Boolean")}} _(booléen)_ indiquant si les conséquences de l'évènement ont été annulées ou non. <!----> @@ -45,7 +45,7 @@ _Cette interface hérite également des propriétés de son parent {{domxref("Ev - : Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document. - {{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}} - : Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document. -- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} +- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} - : Retourne une instance de l'interface `InputDeviceCapabilities` qui fournit des informations sur le périphérique physique responsable de l'évènement. - {{domxref("UIEvent.view")}}{{readonlyinline}} - : Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement. diff --git a/files/fr/web/api/uievent/layerx/index.md b/files/fr/web/api/uievent/layerx/index.md index 8b00e7be60..10dcb3990b 100644 --- a/files/fr/web/api/uievent/layerx/index.md +++ b/files/fr/web/api/uievent/layerx/index.md @@ -12,15 +12,15 @@ translation_of: Web/API/UIEvent/layerX --- {{APIRef("DOM Events")}} {{Non-standard_header}} -La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. +La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. -Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné. +Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné. ## **Syntaxe** - var posx = event.layerX + var posx = event.layerX -- *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché. +- *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché. ## **Exemples** diff --git a/files/fr/web/api/url/createobjecturl/index.md b/files/fr/web/api/url/createobjecturl/index.md index 25ec39cb51..9e3746bdce 100644 --- a/files/fr/web/api/url/createobjecturl/index.md +++ b/files/fr/web/api/url/createobjecturl/index.md @@ -35,7 +35,7 @@ Voir [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/F À chaque fois que vous appelez `createObjectURL()`, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin. -Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. +Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. ### Utiliser les URL d’objet pour les flux de média @@ -68,7 +68,7 @@ Dans d’anciennes versions de la spécification de Media Source, attacher un fl <p> Extension MediaSource.<br />Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les - objets {{domxref("MediaStream")}} ; ce n’est plus supporté. + objets {{domxref("MediaStream")}} ; ce n’est plus supporté. </p> </td> </tr> diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md index 9858af61aa..ae5113d228 100644 --- a/files/fr/web/api/url/hash/index.md +++ b/files/fr/web/api/url/hash/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/hash --- {{ APIRef("URL API") }} -La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. +La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. -Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. +Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md index 7f1e32a768..9814e808c0 100644 --- a/files/fr/web/api/url/index.md +++ b/files/fr/web/api/url/index.md @@ -39,7 +39,7 @@ url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html" ``` -L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. +L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours : @@ -58,7 +58,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html ## Constructeur - {{domxref("URL.URL", "URL()")}} {{experimental_inline}} - - : Crée et retourne un objet `URL` composé des paramètres donnés. + - : Crée et retourne un objet `URL` composé des paramètres donnés. ## Propriétés @@ -98,7 +98,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html - {{domxref("URL.search")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un `'?'` suivi par les paramètres de l'URL. - {{domxref("URL.searchParams")}} - - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. + - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. - {{domxref("URL.username")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom d'utilisateur spécifié avant le nom de domaine. @@ -109,12 +109,12 @@ L'interface `URL` implémente les méthodes définies dans _{{domxref("URLUtils" - {{domxref("URLUtils.toString()")}} - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur. - {{domxref("URL.toJSON()")}} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . ## Méthodes statiques - {{ domxref("URL.createObjectURL()") }} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. - {{ domxref("URL.revokeObjectURL()") }} - : Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}. diff --git a/files/fr/web/api/url/protocol/index.md b/files/fr/web/api/url/protocol/index.md index 2bc51d5bdc..d830f6ae15 100644 --- a/files/fr/web/api/url/protocol/index.md +++ b/files/fr/web/api/url/protocol/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/protocol --- {{ApiRef("URL API")}} -La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. +La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/search/index.md b/files/fr/web/api/url/search/index.md index 87b1925270..f00f6f9497 100644 --- a/files/fr/web/api/url/search/index.md +++ b/files/fr/web/api/url/search/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/search --- {{ApiRef("URL API")}} -La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. +La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche. diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md index 64f622e47f..0b574d29a0 100644 --- a/files/fr/web/api/url/searchparams/index.md +++ b/files/fr/web/api/url/searchparams/index.md @@ -10,7 +10,7 @@ tags: - URLSearchParameters translation_of: Web/API/URL/searchParams --- -{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. +{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. {{AvailableInWorkers}} @@ -20,11 +20,11 @@ translation_of: Web/API/URL/searchParams ### Value -Un objet {{domxref("URLSearchParams")}}. +Un objet {{domxref("URLSearchParams")}}. ## Exemples -Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` +Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` vous pouvez extraire les paramètres 'nom' et 'age' en utilisant: ```js @@ -39,6 +39,6 @@ let age = parseInt(params.get('age')); // le nombre 18 | -------------------------------------------------------------------------------- | -------------------- | -------------------- | | {{SpecName('URL', '#dom-url-searchparams', 'searchParams')}} | {{Spec2('URL')}} | Définition initiale. | -## Compatibilités des navigateurs +## Compatibilités des navigateurs {{Compat("api.URL.searchParams")}} diff --git a/files/fr/web/api/url/tojson/index.md b/files/fr/web/api/url/tojson/index.md index 4c53981f11..0b5438d497 100644 --- a/files/fr/web/api/url/tojson/index.md +++ b/files/fr/web/api/url/tojson/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toJSON --- {{APIRef("URL API")}} -La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. +La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/tostring/index.md b/files/fr/web/api/url/tostring/index.md index 5f61fd9b31..3af4dc690d 100644 --- a/files/fr/web/api/url/tostring/index.md +++ b/files/fr/web/api/url/tostring/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toString --- {{ApiRef("URL API")}} -La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. +La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. {{AvailableInWorkers}} @@ -46,4 +46,4 @@ url.toString() // doit retourner l'URL en tant que chaîne ## Voir aussi -- L'interface {{domxref("URL")}} à laquelle elle appartient. +- L'interface {{domxref("URL")}} à laquelle elle appartient. diff --git a/files/fr/web/api/url/url/index.md b/files/fr/web/api/url/url/index.md index cb9012b467..9bcba5ba7f 100644 --- a/files/fr/web/api/url/url/index.md +++ b/files/fr/web/api/url/url/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/URL --- {{APIRef("URL API")}} -Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. +Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. -Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. +Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. {{AvailableInWorkers}} diff --git a/files/fr/web/api/urlsearchparams/entries/index.md b/files/fr/web/api/urlsearchparams/entries/index.md index e7b812241b..22cddd1de6 100644 --- a/files/fr/web/api/urlsearchparams/entries/index.md +++ b/files/fr/web/api/urlsearchparams/entries/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/URLSearchParams/entries --- {{APIRef("URL API")}}{{SeeCompatTable}} -La méthode **`URLSearchParams.entries()`** retourne un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet {{domxref("USVString")}} . +La méthode **`URLSearchParams.entries()`** retourne un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet {{domxref("USVString")}} . > **Note :** This method is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API). diff --git a/files/fr/web/api/urlsearchparams/index.md b/files/fr/web/api/urlsearchparams/index.md index 27c7e479d8..961bb9e6ce 100644 --- a/files/fr/web/api/urlsearchparams/index.md +++ b/files/fr/web/api/urlsearchparams/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/URLSearchParams L’interface **`URLSearchParams`** définit des méthodes utilitaires pour travailler avec la _chaîne de requête_ (les paramètres `GET`) d’une URL. -Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. +Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. ## Constructeur @@ -80,5 +80,5 @@ searchParams.toString(); // "q=URLUtils.searchParams" ## Voir aussi -- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. +- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. - [Google Developers: Easy URL manipulation with URLSearchParams](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) diff --git a/files/fr/web/api/vibration_api/index.md b/files/fr/web/api/vibration_api/index.md index e9e8569268..c39692cf29 100644 --- a/files/fr/web/api/vibration_api/index.md +++ b/files/fr/web/api/vibration_api/index.md @@ -24,7 +24,7 @@ Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 mi ### Série de vibrations -Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: +Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: @@ -42,7 +42,7 @@ Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau ### Vibrations continues -Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: +Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: ```js var vibrateInterval; @@ -71,7 +71,7 @@ Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du ta ### Pourquoi utiliser l'API de vibration? -Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. +Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. ## Spécifications diff --git a/files/fr/web/api/vrdisplaycapabilities/index.md b/files/fr/web/api/vrdisplaycapabilities/index.md index f4e7209f4d..496c7141a6 100644 --- a/files/fr/web/api/vrdisplaycapabilities/index.md +++ b/files/fr/web/api/vrdisplaycapabilities/index.md @@ -5,22 +5,22 @@ translation_of: Web/API/VRDisplayCapabilities --- {{APIRef("WebVR API")}}{{SeeCompatTable}} -L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. +L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. -Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. +Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. ## Properties - {{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). + - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). - {{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. - {{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}} - - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) + - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) ## Exemples diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg index 088bb1442c..cee81ac6c3 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg @@ -1,5 +1,5 @@ <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="630" height="360"><g transform="translate(.5 .5)"><circle cx="294" cy="248" fill="#fff" stroke="#000" stroke-dasharray="3 3" pointer-events="none" r="110"/><path d="M199 248h190" fill="none" stroke="#000" stroke-width="5" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 188h94v24h-94zm0 24h94v24h-94zm0 24h94v24h-94z"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 258h94v24h-94zm0 24h94v24h-94z"/><path d="M249 188v120m94-120v120" fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M284 180h24v16h-24z"/><text x="3" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 183)">L</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 203h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 206)">R</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 227h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(290 230)">SL</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 250h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(289 253)">SR</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 274h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 277)">C</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 298h24v16h-24z"/><text x="10" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(287 301)">LFE</text><path d="M9 27h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 27-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m74 47 129 135" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M278 26h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m404.65 26-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M278 49h55.5q10 0 10 10v47q0 10 10 10h45.4" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m405.65 116-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M549 25h59.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m615.65 25-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><text y="22" text-anchor="left" font-size="10" font-family="Helvetica" transform="translate(421 216)"> Chaque entrée / sortie est <tspan x="0" dy="1.5em">composée de plusieurs canaux.</tspan> - <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan> + <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan> </text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M151 13h118v50H151z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(176 32)">Noeud audio</text><path d="M9 47h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 47-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 1h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 20)">Noeud audio</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 91h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 110)">Noeud audio</text><text x="19" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(41 12)">Sources</text><text x="24" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(308 11)">Destination</text></g></svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md index 503ef5e776..ee4e66819e 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -7,51 +7,51 @@ Cet article explique une partie de la théorie sur laquelle s'appuient les fonct ## Graphes audio -La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. +La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. -Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie.  -Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc. +Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc.  -Les sources audio peuvent être de provenance variée : +Les sources audio peuvent être de provenance variée : -- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) -- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) -- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) -- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) +- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) +- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) +- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) +- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) ## Données audio: ce qu'on trouve dans un échantillon -Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts. +Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts. -On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). +On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). -## Mémoire tampon : trames, échantillons et canaux +## Mémoire tampon : trames, échantillons et canaux -Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. +Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. -Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. +Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. -Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. +Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. -Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: +Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: -- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. -- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames. +- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. +- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames.  -Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux. +Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux. > **Note :** Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux. @@ -62,22 +62,22 @@ var contexte = new AudioContext(); var memoireTampon = contexte.createBuffer(2, 22050, 44100); ``` -> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? +> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? > -> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz. +> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz. > -> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une [bande de transition](https://en.wikipedia.org/wiki/Transition_band) dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. +> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une [bande de transition](https://en.wikipedia.org/wiki/Transition_band) dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. -Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes. +Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes. ```js var contexte = new AudioContext(); var memoireTampon = context.createBuffer(1, 22050, 22050); ``` -Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement \*rééchantillonnée\* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde. +Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement \*rééchantillonnée\* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde. -> **Note :** le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus). +> **Note :** le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus). ### Mémoire tampon linéaire ou entrelacée @@ -91,13 +91,13 @@ L'alternative est d'utiliser un format entrelacé: LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames) -Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. +Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. La Web Audio API expose \*uniquement\* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement. ## Canaux audio -Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : +Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : <table class="standard-table"> <tbody> @@ -234,7 +234,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td> <em>Conversion descendante de quad vers mono</em>.<br />Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et - <code>SR</code>) sont combinés pour produire l'unique canal de sortie + <code>SR</code>) sont combinés pour produire l'unique canal de sortie (<code>M</code>).<br /><code >output.M = 0.25 * (input.L + input.R + </code ><code>input.SL + input.SR</code><code>)</code> @@ -291,7 +291,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td><code>2</code> <em>(Stéréo)</em></td> <td> <em>Conversion descendante de 5.1 vers stéréo.</em><br />Le canal - central (<code>C</code>) est additionné avec chacun des canaux latéraux + central (<code>C</code>) est additionné avec chacun des canaux latéraux (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal @@ -325,7 +325,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br />La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les - enceintes. Ce cas de figure n'est par conséquent pas garanti dans le + enceintes. Ce cas de figure n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer. </td> @@ -377,19 +377,19 @@ On peut accéder aux données en utilisant les méthodes suivantes: - {{domxref("AnalyserNode.getFloatTimeDomainData()")}} - : Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument. - {{domxref("AnalyserNode.getByteTimeDomainData()")}} - - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. + - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. > **Note :** Pour plus d'informations, voir notre article [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API). ## Spatialisations -Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. +Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.  -La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux. +La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.  diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md index d11a9df3d0..449857d226 100644 --- a/files/fr/web/api/web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/index.md @@ -7,11 +7,11 @@ La Web Audio API propose un système puissant et flexible pour contrôler les do ## Concepts et usages -La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques. +La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques. -Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe. +Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe. -Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu. +Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu. Un processus de développement typique avec web audio ressemble à ceci : @@ -25,13 +25,13 @@ Un processus de développement typique avec web audio ressemble à ceci : Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs. -La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur). +La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur). > **Note :** Vous pouvez lire davantage de détails sur l'API <i lang="en">Web Audio</i> en vous rendant sur notre article [Les concepts de base de l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API). -## Interface de la Web Audio API +## Interface de la Web Audio API -La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. +La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. ### Définition du graphe audio @@ -55,7 +55,7 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("AudioBufferSourceNode")}} - : Un objet **`AudioBufferSourceNode`** est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaElementAudioSourceNode")}} - - : Un objet **`MediaElementAudio.SourceNode`** est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. + - : Un objet **`MediaElementAudio.SourceNode`** est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaStreamAudioSourceNode")}} - : Un objet **`MediaStreamAudio.SourceNode`** est une source audio composée d'un [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. @@ -66,63 +66,63 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("ConvolverNode")}} - : Un objet **`Convolver.Node`** est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération. - {{domxref("DelayNode")}} - - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. + - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. - {{domxref("DynamicsCompressorNode")}} - - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. + - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. - {{domxref("GainNode")}} - - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. + - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. - {{domxref("WaveShaperNode")}} - - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. + - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. - {{domxref("PeriodicWave")}} - - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. + - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. ### Définition des destinations audio Une fois que le signal audio a été traité, ces interfaces définissent sa destination. - {{domxref("AudioDestinationNode")}} - - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. + - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. - {{domxref("MediaStreamAudioDestinationNode")}} - - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. + - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. -### Analyse des données et visualisation +### Analyse des données et visualisation - {{domxref("AnalyserNode")}} - - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. + - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. ### Division et fusion des pistes audio - {{domxref("ChannelSplitterNode")}} - - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. + - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. - {{domxref("ChannelMergerNode")}} - - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. + - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. ### Spatialisation audio - {{domxref("AudioListener")}} - - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. + - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. - {{domxref("PannerNode")}} - - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. + - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. ### Traitement audio avec JavaScript -> **Note :** Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}. +> **Note :** Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}. - {{domxref("ScriptProcessorNode")}} - - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. + - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. - {{event("audioprocess")}} (event) - - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. + - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. - {{domxref("AudioProcessingEvent")}} - : L'objet `AudioProcessingEvent` est envoyé aux fonctions de rappel (<i lang="en">callback</i>) qui écoutent l'évènement `audioprocess`. ### Traitement audio hors ligne ou en tâche de fond -Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. +Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. - {{domxref("OfflineAudioContext")}} - : Un objet **`OfflineAudioContext`** est une interface [`AudioContext`](/fr/docs/Web/API/AudioContext) qui représente un graphe de traitement audio construit à partir de nœuds audio. À la différence d'une interface `AudioContext` standard, une interface `OfflineAudioContext` n'exporte pas vraiment le son, mais le génère *aussi vite que possible* dans un buffer. - {{event("complete")}} (event) - - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. + - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. - {{domxref("OfflineAudioCompletionEvent")}} - : The `OfflineAudioCompletionEvent` est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface. @@ -148,9 +148,9 @@ Les objets suivants étaient définis dans les versions précédentes de la spé ## Exemple -Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début ! +Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début ! -Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation. +Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation. ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio @@ -167,146 +167,146 @@ var gainVolume = contexteAudio.createGain(); var filtreAccordable = contexteAudio.createBiquadFilter(); function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion - var k = typeof taille === 'number' ? taille : 50, - nombre_echantillons = 44100, - courbe = new Float32Array(nombre_echantillons), - angle = Math.PI / 180, - i = 0, - x; - for ( ; i < nombre_echantillons; ++i ) { - x = i * 2 / nombre_echantillons - 1; - courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); - } - return courbe; + var k = typeof taille === 'number' ? taille : 50, + nombre_echantillons = 44100, + courbe = new Float32Array(nombre_echantillons), + angle = Math.PI / 180, + i = 0, + x; + r ( ; i < nombre_echantillons; ++i ) + x = i * 2 / nombre_echantillons - 1; + courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); + } + return courbe; }; navigator.getUserMedia ( - // contraintes - uniquement audio dans cet exemple - { - audio: true - }, - - // callback de succès - function(flux) { - source = contexteAudio.createMediaStreamSource(flux); - source.connect(analyseur); - analyseur.connect(distorsion); - distorsion.connect(filtreAccordable); - filtreAccordable.connect(gainVolume); - gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux - - genererVisualisation(flux); - voiceChange(); - - }, - - // callback d'erreur - function(err) { - console.log("L'erreur GUM suivante a eu lieu : " + err); - } + // contraintes - uniquement audio dans cet exemple + { + audio: true + }, + + // callback de succès + function(flux) { + source = contexteAudio.createMediaStreamSource(flux); + source.connect(analyseur); + analyseur.connect(distorsion); + distorsion.connect(filtreAccordable); + filtreAccordable.connect(gainVolume); + gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux + + genererVisualisation(flux); + voiceChange(); + + }, + + // callback d'erreur + function(err) { + console.log("L'erreur GUM suivante a eu lieu : " + err); + } ); function genererVisualisation(flux) { - const LARGEUR = canvas.width; - const HAUTEUR = canvas.height; - - var parametreVisualisation = visualisationSelectionnee.value; - console.log(parametreVisualisation); - - if(parametreVisualisation == "sinewave") { - analyseur.fftSize = 2048; - var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) - var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données - - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - - function draw() { - - renduVisuel = requestAnimationFrame(draw); - - analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé - - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = LARGEUR * 1.0 / tailleBuffer; - var x = 0; - - for(var i = 0; i < tailleBuffer; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(parametreVisualisation == "off") { - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - } + const LARGEUR = canvas.width; + const HAUTEUR = canvas.height; + + var parametreVisualisation = visualisationSelectionnee.value; + console.log(parametreVisualisation); + + if(parametreVisualisation == "sinewave") { + analyseur.fftSize = 2048; + var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) + var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données + + canvasCtx.clearRec + + function draw() { + + renduVisuel = + + analyseur.getByteTi + + canvasCtx.fillStyle + canvas + + canvasCtx.lineWidth + can + + canvasCtx.beginPath + + var sliceWi + var + + fo + + + + + + + + canvasCtx.line + + + x += sliceWidth; + } + + + c + }; + + draw(); + + } else if(parametreVisualisation == "off") { + canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); + } } function modifierVoix() { - distorsion.curve = new Float32Array; - filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée - - var choixVoix = voixSelectionnee.value; - console.log(choixVoix); - - if(choixVoix == "distortion") { - distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme - } else if(choixVoix == "biquad") { - filtreAccordable.type = "lowshelf"; - filtreAccordable.frequency.value = 1000; - filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable - } else if(choixVoix == "off") { - console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée - } + distorsion.curve = new Float32Array; + filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée + + var choixVoix = voixSelectionnee.value; + console.log(choixVoix); + + if(choixVoix == "distortion") { + distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme + else if(choixVoix == "biquad") { + filtreAccordable.type = "lowshelf"; + filtreAccordable.frequency.value = 1000; + filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable + } else if(choixVoix == "off") { + console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée + } } // écouteurs d'évènements pour les changements de visualisation et de voix visualisationSelectionnee.onchange = function() { - window.cancelAnimationFrame(renduVisuel); - genererVisualisation(flux); + window.cancelAnimationFrame(renduVisuel); + genererVisualisation(flux); } voixSelectionnee.onchange = function() { - modifierVoix(); + modifierVoix(); } silence.onclick = muterVoix; function muterVoix() { // allumer / éteindre le son - if(silence.id == "") { - gainVolume.gain.value = 0; // gain à 0 pour éteindre le son - silence.id = "activated"; - silence.innerHTML = "Unmute"; - } else { - gainVolume.gain.value = 1; // gain à 1 pour allumer le son - silence.id = ""; - silence.innerHTML = "Mute"; - } + if(silence.id == "") { + gainVolume.gain.value = 0; // gain à 0 pour éteindre le son + silence.id = "activated"; + silence.innerHTML = "Unmute"; + else { + gainVolume.gain. + silence.id = ""; + silence.innerHTML = "Mute"; + } } ``` @@ -336,7 +336,7 @@ function muterVoix() { // allumer / éteindre le son ### Guides -- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) +- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) - [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) - [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) - [Web audio spatialisation basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics) diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md index 59727d0cbc..ecfe9c7732 100644 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md @@ -7,13 +7,13 @@ La [Web Audio API](/en-US/docs/Web_Audio_API) offre un méchanisme à la fois si La Web Audio API ne vient pas remplacer l'élément [\<audio>](/en-US/docs/Web/HTML/Element/audio), mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément [\<video>](/en-US/docs/Web/HTML/Element/Img). Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, \<audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle. -L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. +L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. ## Exemples Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations ! -Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)). +Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)).  @@ -23,12 +23,12 @@ Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-cha La Web Audio API impliqe de réaliser les opérations de traitement audio dans un **contexte audio**, et elle a été conçue pour permettre le **routage modulaire**. Les opérations de traitement de base sont réalisées par des **noeuds audio**, qui sont reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques. -Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie. ### Création d'un contexte audio @@ -98,7 +98,7 @@ Ce code créerait le graphe audio suivant : Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain. -> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. +> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. ### Lecture du son et définition du pitch @@ -241,7 +241,7 @@ function genererCourbeDistortion(amount) { }; ``` -L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : +L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : ```js source.connect(analyser); diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md index 872fce40bf..b39cbc986d 100644 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md @@ -27,15 +27,15 @@ analyseur.connect(distortion); > **Note :** il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud. -L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048). +L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048). > **Note :** Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde. -Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. +Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. -Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. +Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. ```js analyseur.fftSize = 2048; diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md index 11b0bd0c22..320e66a578 100644 --- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md +++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md @@ -18,9 +18,9 @@ Dans cet article nous allons nous concentrer sur la position de l'auditeur et du > **Note :** Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit. -Les autres options disponibles, que nous ne traiterons pas ici, sont : +Les autres options disponibles, que nous ne traiterons pas ici, sont : -- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) +- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) - `setVelocity()`: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect. - `coneInnerAngle`, `coneOuterAngle`, and `coneOuterGain`: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source. diff --git a/files/fr/web/api/web_speech_api/index.md b/files/fr/web/api/web_speech_api/index.md index 7b43fa3975..a625e2aea0 100644 --- a/files/fr/web/api/web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/index.md @@ -11,68 +11,68 @@ translation_of: Web/API/Web_Speech_API --- {{DefaultAPISidebar("Web Speech API")}}{{seecompattable}} -L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone). +L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone). ## Concepts et usages de l'API Web Speech L'API <i lang="en">Web Speech</i> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties : -- La reconnaissance vocale ( +- La reconnaissance vocale ( <i lang="en">Speech recognition</i> - ) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). + ) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). -- La synthèse vocale ( +- La synthèse vocale ( <i lang="en">Speech synthesis</i> - ) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}. + ) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}. -Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) +Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) ## Les interfaces de l'API Web Speech ### Le reconnaissance vocale - {{domxref("SpeechRecognition")}} - - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. + - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. - {{domxref("SpeechRecognitionAlternative")}} - : Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale. - {{domxref("SpeechRecognitionError")}} - : Répresente les messages d'erreur de l'outil de reconnaissance vocale. - {{domxref("SpeechRecognitionEvent")}} - - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. + - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. - {{domxref("SpeechGrammar")}} - : Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître. - {{domxref("SpeechGrammarList")}} - - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. + - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. - {{domxref("SpeechRecognitionResult")}} - - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. + - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. - {{domxref("SpeechRecognitionResultList")}} - - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. + - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. ### La synthèse vocale - {{domxref("SpeechSynthesis")}} - : L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires. - {{domxref("SpeechSynthesisErrorEvent")}} - - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. + - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. - {{domxref("SpeechSynthesisEvent")}} - - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. + - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. - {{domxref("SpeechSynthesisUtterance")}} - : Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume). <!----> - {{domxref("SpeechSynthesisVoice")}} - - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. + - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. - {{domxref("Window.speechSynthesis")}} - - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. + - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. ## Exemples -Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. +Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. ## Spécifications diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md index c09db4c4fd..2dfc00f16d 100644 --- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md @@ -18,13 +18,13 @@ L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissanc La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat. -L'API Web Speech a une interface principale de contrôle — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc. +L'API Web Speech a une interface principale de contrôle — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc. > **Note :** Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne. ### Demo -Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie. +Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie. Pour lancer la demo, vous pouvez cloner (ou [directement télécharger](https://github.com/mdn/web-speech-api/archive/master.zip)) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers [l'URL de démonstration live](https://mdn.github.io/web-speech-api/speech-color-changer/), sur un navigateur pour mobile le supportant comme Chrome. @@ -134,10 +134,10 @@ Once the speech recognition is started, there are many event handlers that can b ```js recognition.onresult = function(event) { - var color = event.results[0][0].transcript; - diagnostic.textContent = 'Result received: ' + color + '.'; - bg.style.backgroundColor = color; - console.log('Confidence: ' + event.results[0][0].confidence); + var color = event.results[0][0].transcript; + diagnostic.textContent = 'Result received: ' + color + '.'; + bg.style.backgroundColor = color; + console.log('Confidence: ' + event.results[0][0].confidence); } ``` @@ -179,13 +179,13 @@ The Web Speech API has a main controller interface for this — {{domxref("Speec To show simple usage of Web speech synthesis, we've provided a demo called [Speak easy synthesis](https://mdn.github.io/web-speech-api/speak-easy-synthesis/). This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken. -To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. +To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. ### Browser support Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: -- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. +- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. - Firefox OS 2.5+ supports it, by default, and without the need for any permissions. - Chrome for Desktop and Android have supported it since around version 33, without prefixes. diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md index 33dc7e8518..32a10b50b2 100644 --- a/files/fr/web/api/web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/index.md @@ -12,31 +12,31 @@ translation_of: Web/API/Web_Storage_API --- {{DefaultAPISidebar("Web Storage API")}} -L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. +L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. ## Web Storage, concepts et utilisations -Les deux mécanismes au sein du web storage sont les suivantes: +Les deux mécanismes au sein du web storage sont les suivantes: - `sessionStorage` maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure) - `localStorage` fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert. -Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément. +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément. > **Note :** À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web. -> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) +> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) > **Note :** Le <i lang="en">Web Storage</i> n'est pas identique au `mozStorage` (interfaces XPCOM de Mozilla vers SQLite) ou l'API <i lang="en">Session Store</i> (un utilitaire de stockage XPCOM utilisable par des extensions). ## Web Storage interfaces - {{domxref("Storage")}} - - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. + - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. - {{domxref("Window")}} - - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement. + - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement. - {{domxref("StorageEvent")}} - - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. + - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. ## Exemples @@ -70,4 +70,4 @@ Les développeuses et développeurs doivent connaître ces différentes impléme - [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) - [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) -- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) +- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md index f4ee6b207c..22b63937ad 100644 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md @@ -9,7 +9,7 @@ tags: - localStorage translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API --- -L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation. +L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation. ## Concepts de base @@ -21,14 +21,14 @@ localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); ``` -> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. +> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. Les deux principaux mécanismes internes du Stockage Web sont : - **`sessionStorage`** qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations). - **`localStorage`** qui tient le même rôle mais persiste même après le redémarrage du navigateur web. -Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. Donc, par exemple, un appel initial de `localStorage` sur un document va retourner un objet {{domxref("Storage")}} ; un appel de `sessionStorage` sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément. @@ -85,7 +85,7 @@ Vous pouvez retrouver ici [une brève histoire de la détection de localStorage] ## Un exemple simple -Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration: +Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:  @@ -137,7 +137,7 @@ Ici, les trois premières lignes vont chercher les valeurs dans le stockage loca ## Enregistrer une valeur dans le stockage -{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. +{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. ```js function populateStorage() { diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index 4569d01aa5..876ac1fc52 100644 --- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -18,7 +18,7 @@ En plus de l'ensemble des fonctions standard [JavaScript](/en-US/docs/Web/JavaSc <td class="header">Workers partagés</td> <td class="header">Service workers</td> <td class="header">Chrome workers {{Non-standard_inline}}</td> - <td class="header">En dehors des workers</td> + <td class="header">En dehors des workers</td> </tr> <tr> <td>{{domxref("WindowBase64.atob", "atob()")}}</td> diff --git a/files/fr/web/api/web_workers_api/index.md b/files/fr/web/api/web_workers_api/index.md index c8ee4c3ff1..1bff3ddeef 100644 --- a/files/fr/web/api/web_workers_api/index.md +++ b/files/fr/web/api/web_workers_api/index.md @@ -18,14 +18,14 @@ Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du work Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode `postMessage()`, et la réponse leur parvient au moyen du gestionnaire d'événement `onmessage` (le message est contenu dans l'attribut `data` de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées. -Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. +Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. En plus des workers dédiés, il y a d'autres types de worker : - Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails. - Les [ServiceWorkers](/en-US/docs/Web/API/ServiceWorker_API) fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan. - Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux [js-ctypes](/fr/docs/Mozilla/js-ctypes) dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. -- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. +- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. > **Note :** Selon les [Spécifications de Web Worker](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42. diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md index 6129b8598f..ee5e07025b 100644 --- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md @@ -10,7 +10,7 @@ L’algorithme, essentiellement, parcourt tous les champs de l’objet original, ## Avantages par rapport à JSON -Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : +Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : - Le clonage structuré peut copier des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp). - Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}. @@ -19,9 +19,9 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu ## Ce qui ne marche pas avec le clonage structuré -- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. +- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. - De la même manière, toute tentative de cloner des nœuds DOM émettra une exception `DATA_CLONE_ERR`. -- Certains paramètres d’objets ne sont pas préservés : +- Certains paramètres d’objets ne sont pas préservés : - Le champ `lastIndex` des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp) n’est pas préservé. - Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule _via_ un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut. @@ -32,22 +32,22 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu | Type d’objet | Notes | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | [Tous types primitifs](/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) | À l’exception des symboles | -| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | -| Objet String | | -| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | +| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | +| Objet String | | +| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | | [RegExp](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | Le champ `lastIndex` n’est pas préservé | -| {{ domxref("Blob") }} | | -| {{ domxref("File") }} | | -| {{ domxref("FileList") }} | | -| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | +| {{ domxref("Blob") }} | | +| {{ domxref("File") }} | | +| {{ domxref("FileList") }} | | +| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | | [ArrayBufferView](/en-US/docs/Web/API/ArrayBufferView) | Ce qui implique tous les [tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays) tels que `Int32Array`, etc. | -| {{ domxref("ImageData") }} | | -| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | +| {{ domxref("ImageData") }} | | +| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | | [Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) | Inclut seulement les objets plats (par ex. depuis un objet littéral) | -| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | -| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | +| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | +| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | -## Alternative : copie profonde +## Alternative : copie profonde Si vous voulez une **copie profonde** d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible. @@ -87,7 +87,7 @@ function clone(objectToBeCloned) { ## Voir aussi -- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) +- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) - {{ domxref("window.history") }} - {{ domxref("window.postMessage()") }} - [Web Workers](/en-US/docs/Web/API/Web_Workers_API) diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.md b/files/fr/web/api/web_workers_api/using_web_workers/index.md index a6ed47d385..73b70bd9dd 100644 --- a/files/fr/web/api/web_workers_api/using_web_workers/index.md +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.md @@ -21,7 +21,7 @@ Le contexte du _worker_ est représenté par un objet {{domxref("DedicatedWorker > **Note :** Voir [la page d'entrée pour l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) pour consulter la documentation de référence sur les _workers_ et d'autres guides. -Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). Les données sont échangées entre le _thread_ du _worker_ et le _thread_ principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode `postMessage()` et réagir aux messages reçus grâce au gestionnaire d'évènement `onmessage` (le message sera contenu dans l'attribut `data` de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées. @@ -124,7 +124,7 @@ L'évènement décrivant l'erreur possède notamment trois propriétés intéres ### Initier des _workers_ fils -Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. +Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. ### Importer des scripts et des bibliothèques @@ -490,7 +490,7 @@ La plupart des fonctionnalités JavaScript standard peuvent être utilisées dan En revanche, un _worker_ ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages. -> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). ## Spécifications diff --git a/files/fr/web/api/webgl2renderingcontext/index.md b/files/fr/web/api/webgl2renderingcontext/index.md index 4ed7247a1b..3bac29da27 100644 --- a/files/fr/web/api/webgl2renderingcontext/index.md +++ b/files/fr/web/api/webgl2renderingcontext/index.md @@ -31,7 +31,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Informations d'état - {{domxref("WebGL2RenderingContext.getIndexedParameter()")}} - - : Retourne la valeur indexée pour la `cible` donnée. + - : Retourne la valeur indexée pour la `cible` donnée. ## Tampons @@ -47,7 +47,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Tampons d'image - {{domxref("WebGL2RenderingContext.blitFramebuffer()")}} - - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. + - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. - {{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}} - : Attache une seule couche de texture à un tampon d'image. - {{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}} @@ -62,7 +62,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.getInternalformatParameter()")}} - : Retourne des informations sur le support, dépendant de l'implémentation, des formats internes. - {{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}} - - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. + - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. ## Textures @@ -81,12 +81,12 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}} - : Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé. -## Programmes et shaders +## Programmes et shaders - {{domxref("WebGL2RenderingContext.getFragDataLocation()")}} - - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. + - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. -## Uniforms et attributs +## Uniforms et attributs - {{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}} - : Méthodes spécifiant les valeurs des variables uniform. @@ -102,11 +102,11 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}} - : Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}. - {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. - {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. - {{domxref("WebGL2RenderingContext.drawRangeElements()")}} - - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. + - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. - {{domxref("WebGL2RenderingContext.drawBuffers()")}} - : Spécifie une liste de tampons de couleur dans lesquels dessiner. - {{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}} @@ -127,7 +127,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.endQuery()")}} - : Marque la fin d'une requête asynchrone. - {{domxref("WebGL2RenderingContext.getQuery()")}} - - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. + - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. - {{domxref("WebGL2RenderingContext.getQueryParameter()")}} - : Retourne des informations sur une requête. @@ -138,7 +138,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSampler()")}} - : Supprime l'objet {{domxref("WebGLSampler")}} donné. - {{domxref("WebGL2RenderingContext.bindSampler()")}} - - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. + - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. - {{domxref("WebGL2RenderingContext.isSampler()")}} - : Retourne `true` si l'objet donné est un objet {{domxref("WebGLSampler")}} valide. - {{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}} @@ -155,7 +155,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSync()")}} - : Supprime l'objet {{domxref("WebGLSync")}} donné. - {{domxref("WebGL2RenderingContext.clientWaitSync()")}} - - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. + - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. - {{domxref("WebGL2RenderingContext.waitSync()")}} - : Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal. - {{domxref("WebGL2RenderingContext.getSyncParameter()")}} @@ -182,12 +182,12 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}} - : Suspend une opération de retour de transformations. - {{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}} - - : Reprend une opération de retour de transformations. + - : Reprend une opération de retour de transformations. ## Objets tampons uniforms - {{domxref("WebGL2RenderingContext.bindBufferBase()")}} - - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. + - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.bindBufferRange()")}} - : Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.getUniformIndices()")}} @@ -210,7 +210,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} - {{domxref("WebGL2RenderingContext.createVertexArray()")}} - : Crée un nouveau {{domxref("WebGLVertexArrayObject")}}. - {{domxref("WebGL2RenderingContext.deleteVertexArray()")}} - - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. + - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. - {{domxref("WebGL2RenderingContext.isVertexArray()")}} - : Retourne `true` si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide. - {{domxref("WebGL2RenderingContext.bindVertexArray()")}} diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md index b4abf46df9..5909544024 100644 --- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md @@ -23,15 +23,15 @@ Dans cet article, on illustre comment dessiner des rectangles et des carrés gr Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}. -La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. +La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. Cet article représente une excellente occasion pour distinguer les _pixels_ des _fragments_. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un _fragment_ fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}. Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène). -Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. +Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. -Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. +Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. ```html <p>Le résultat de la découpe.</p> diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md index 5a007a9434..5ee0933158 100644 --- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md @@ -37,7 +37,7 @@ Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript `getR - Nettoie le buffer avec `clear` - Applique le contexte initialisé -S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. +S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées. diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md index 82f6d06ef7..04823c499b 100644 --- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md @@ -66,8 +66,8 @@ canvas { window.addEventListener("load", function setupWebGL (evt) { "use strict" - // On fait le ménage : le gestionnaire se supprime lui- - // même car il n'a besoin d'être exécuté qu'une fois. + // On fait le ménage : le gestionnaire se supprime lui- + // même car il n'a besoin d'être exécuté qu'une fois. window.removeEventListener(evt.type, setupWebGL, false); // On ajoute le même gestionnaire de clic sur le canevas @@ -92,8 +92,8 @@ window.addEventListener("load", function setupWebGL (evt) { || canvas.getContext("experimental-webgl"); if (!gl) { alert("Échec de la récupération du \n" - + "contexte WebGL. Votre navigateur peut ne pas \n" - + " supporter WebGL."); + + "contexte WebGL. Votre navigateur peut ne pas \n" + + " supporter WebGL."); return; } gl.viewport(0, 0, diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md index 4064bb708f..2628ebf301 100644 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -25,7 +25,7 @@ Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tomben Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate. -De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. +De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. ```html hidden <p>Vous en avez attrapé @@ -116,14 +116,14 @@ function playerClick (evt) { ]; // si le clic est sur un rectangle, on l'attrape. // On incrémente donc le score et on crée un nouveau rectangle - var diffPos = [ position[0] - rainingRect.position[0], - position[1] - rainingRect.position[1] ]; - if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0] - && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) { - score += 1; - scoreDisplay.innerHTML = score; - rainingRect = new Rectangle(); - } + var diffPos = [ position[0] - rainingRect.position[0], + position[1] - rainingRect.position[1] ]; + if ( diffPos[ + && diffPo + score += 1; + scoreDisplay.innerHTML = score; + rainingRect = new Rectangle(); + } } function Rectangle () { diff --git a/files/fr/web/api/webgl_api/data/index.md b/files/fr/web/api/webgl_api/data/index.md index b122c4a378..b3bea5e383 100644 --- a/files/fr/web/api/webgl_api/data/index.md +++ b/files/fr/web/api/webgl_api/data/index.md @@ -20,25 +20,25 @@ original_slug: Web/API/WebGL_API/Données --- {{WebGLSidebar}}{{draft}} -Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. +Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. ## Types de données GLSL -<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> +<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> ## Variables GLSL -Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. +Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. ### Attributes -Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. +Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. <\<add how to use them>> ### Varyings -Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. +Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. <\<how to use>> diff --git a/files/fr/web/api/webgl_api/index.md b/files/fr/web/api/webgl_api/index.md index 782877cdae..5dc90f1dc9 100644 --- a/files/fr/web/api/webgl_api/index.md +++ b/files/fr/web/api/webgl_api/index.md @@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API Le support pour WebGL est présent dans [Firefox](/fr/docs/Mozilla/Firefox) 4+, [Google Chrome](https://www.google.com/chrome/) 9+, [Opera](https://www.opera.com/fr) 12+, [Safari](https://www.apple.com/fr/safari/) 5.1+, [Internet Explorer](https://support.microsoft.com/fr-fr/windows/aide-d-internet-explorer-23360e49-9cd3-4dda-ba52-705336cc0de2) 11+ et les versions 10240+ de [Microsoft Edge](https://www.microsoft.com/fr-fr/edge) ; toutefois, l'appareil de l'utilisatrice ou l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités. -L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. +L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. ## Référence @@ -80,69 +80,69 @@ L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR - {{Event("webglcontextrestored")}} - {{Event("webglcontextcreationerror")}} -### Constantes et types +### Constantes et types - [Constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants) - [Types WebGL](/fr-FR/docs/Web/API/WebGL_API/Types) ### WebGL 2 -WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent : +WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent : -- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), -- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), -- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), -- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), -- les [objets Query](/en-US/docs/Web/API/WebGLQuery), -- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), -- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). +- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), +- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), +- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), +- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), +- les [objets Query](/en-US/docs/Web/API/WebGLQuery), +- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), +- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). -Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. +Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. -## Guides et tutoriels +## Guides et tutoriels -Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. +Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. ### Guides -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) - - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) + - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. - [Meilleures pratiques WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices) - - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. + - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. - [Utilisation des extensions](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions) - - : Un guide pour l'utilisation des extensions WebGL. + - : Un guide pour l'utilisation des extensions WebGL. ### Tutoriels - [Tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) - - : Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL. + - : Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL. ### Exemples -- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - - : Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL. +- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) + - : Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL. ### Tutoriels avancés - [Projection de vue de modèle WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection) - - : Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection. -- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) - - : Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3. + - : Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection. +- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) + - : Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3. ## Ressources -- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. -- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. -- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. -- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. -- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. -- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. -- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. +- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. +- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. +- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. +- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. +- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. +- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. +- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. ### Bibliothèques -- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances -- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. +- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances +- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. ## Spécifications @@ -150,8 +150,8 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les | ---------------------------------------- | ------------------------------------ | --------------------------------------------------------- | | {{SpecName('WebGL')}} | {{Spec2('WebGL')}} | Définition. Basée sur OpenGL ES 2.0 | | {{SpecName('WebGL2')}} | {{Spec2('WebGL2')}} | Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0. | -| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | -| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | +| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | +| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | ## Compatibilité des navigateurs @@ -165,7 +165,7 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les ### Notes de compatibilité -En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. +En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. ### Notes Gecko @@ -174,11 +174,11 @@ En plus du navigateur, la GPU elle-même doit également prendre en charge la f À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test : - `webgl.min_capability_mode` - - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. - `webgl.disable_extensions` - - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. ## Voir aussi - [Canvas](/fr-FR/docs/Web/API/Canvas_API) -- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) +- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 4beb39300e..3b5ab22a47 100644 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -17,29 +17,29 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} -Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D. +Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D. -## Dessiner la scène +## Dessiner la scène -La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. +La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. ### Les shaders -Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs. +Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs. -Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un **programme shader**. +Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un **programme shader**. -Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. +Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. -#### Le shader de sommet +#### Le shader de sommet -Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. +Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée `gl_Position`. -Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. +Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. -Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). +Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). // Programme shader de sommet @@ -54,13 +54,13 @@ Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à } `; -Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). #### Le shader de fragment -Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. +Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. -Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. +Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. const fsSource = ` void main() { @@ -68,9 +68,9 @@ Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes } `; -### Initialisation des shaders +### Initialisation des shaders -Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. +Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. // // Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données @@ -123,17 +123,17 @@ Maintenant que nous avons défini les deux shaders, nous devons les transmettre La fonction `loadShader()` prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit : -1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; -2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; -3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; -4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; +1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; +2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; +3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; +4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; 5. si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant. Pour utiliser ce code, nous l'appelons de la façon suivante : const shaderProgram = initShaderProgram(gl, vsSource, fsSource); -Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. +Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. const programInfo = { program: shaderProgram, @@ -148,7 +148,7 @@ Après avoir créé un programme de shaders, nous devons rechercher les emplacem ## Création du carré 2D -Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. +Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. function initBuffers(gl) { @@ -157,7 +157,7 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp const positionBuffer = gl.createBuffer(); // Définir le positionBuffer comme étant celui auquel appliquer les opérations - // de tampon à partir d'ici. + // de tampon à partir d'ici. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); @@ -171,8 +171,8 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp ]; // Passer mainenant la liste des positions à WebGL pour construire la forme. - // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, - // puis en l'utilisant pour remplir le tampon en cours. + // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, + // puis en l'utilisant pour remplir le tampon en cours. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), @@ -183,13 +183,13 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp }; } -Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. +Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. -Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. +Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. -## Rendu de la scène +## Rendu de la scène -Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. +Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. > **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix.js](https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js) pour résoudre ce problème, comme suggéré [ici](https://github.com/mdn/webgl-examples/issues/20). @@ -204,9 +204,9 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour - // simuler la distorsion de la perspective dans une caméra. + // simuler la distorsion de la perspective dans une caméra. // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui - // correspond à la taille d'affichage du canvas ; + // correspond à la taille d'affichage du canvas ; // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités // à partir de la caméra. @@ -217,7 +217,7 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const projectionMatrix = mat4.create(); // note: glmatrix.js a toujours comme premier argument la destination - // où stocker le résultat. + // où stocker le résultat. mat4.perspective(projectionMatrix, fieldOfView, aspect, @@ -229,14 +229,14 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const modelViewMatrix = mat4.create(); // Commencer maintenant à déplacer la position de dessin un peu vers là où - // nous voulons commencer à dessiner le carré. + // nous voulons commencer à dessiner le carré. mat4.translate(modelViewMatrix, // matrice de destination modelViewMatrix, // matrice de déplacement [-0.0, 0.0, -6.0]); // quantité de déplacement // Indiquer à WebGL comment extraire les positions à partir du tampon des - // positions pour les mettre dans l'attribut vertexPosition. + // positions pour les mettre dans l'attribut vertexPosition. { const numComponents = 2; // extraire 2 valeurs par itération const type = gl.FLOAT; // les données dans le tampon sont des flottants 32bit @@ -278,22 +278,22 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et } } -La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. +La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. -Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. +Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. {{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) ## Opérations utilitaires matricielles -Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). +Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). -Voir aussi : +Voir aussi : -- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; -- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; -- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. +- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; +- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; +- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md index 7a736660b7..ea49a14322 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -9,11 +9,11 @@ original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} -Dans cet exemple, nous allons faire tourner notre carré 2D. +Dans cet exemple, nous allons faire tourner notre carré 2D. ## Faire tourner le carré -Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : +Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : ```js var squareRotation = 0.0; @@ -26,9 +26,9 @@ Maintenant, nous devons modifier la fonction `drawScene()` pour appliquer la rot squareRotation, // rotation en radians [0, 0, 1]); // axe autour duquel tourner -Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. +Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. -Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : +Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : var then = 0; @@ -44,14 +44,14 @@ Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code } requestAnimationFrame(render); -Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. +Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. - squareRotation += deltaTime; + squareRotation += deltaTime; -Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. +Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. {{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md index 6844827c75..813ff0dee9 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md @@ -22,38 +22,38 @@ La première étape consiste à créer l'élément {{HTMLElement("video")}} que var copierVideo = false; function configurerVideo(url) { - const video = document.createElement('video'); + const video = document.createElement('video'); - var playing = false; - var timeupdate = false; + var playing = false; + var timeupdate = false; - video.autoplay = true; - video.muted = true; - video.loop = true; + video.autoplay = true; + video.muted = true; + video.loop = true; - // Le fait d'attendre ces 2 évènements assure + // Le fait d'attendre ces 2 évènements assure // qu'il y a des données dans la vidéo - video.addEventListener('playing', function() { - playing = true; - verifierPret(); - }, true); + video.addEventListener('playing', function() { + playing = true; + verifierPret(); + }, true); - video.addEventListener('timeupdate', function() { - timeupdate = true; - verifierPret(); - }, true); + video.addEventListener('timeupdate', function() { + timeupdate = true; + verifierPret(); + }, true); - video.src = url; - video.play(); + video.src = url; + video.play(); - function verifierPret() { - if (playing && timeupdate) { - copierVideo = true; - } - } + function verifierPret() { + if (playing && timeupdate) { + copierVideo = true; + } + } - return video; + return video; } ``` @@ -61,52 +61,52 @@ D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatiqu Et enfin, nous définissons l'attribut `src` pour commencer, et nous appelons `play` pour démarrer le chargement et la lecture de la vidéo. -## Utilisation des images vidéo comme texture +## Utilisation des images vidéo comme texture La prochaine modification porte sur `initTexture()`, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure : ```js function initTexture(gl, url) { - const texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); // Parce que la vidéo doit être téléchargée depuis sur Internet, // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc // mettre un seul pixel dans la texture, de façon à ce que nous puissions // l'utiliser immédiatement. - const niveau = 0; - const formatInterne = gl.RGBA; - const largeur = 1; - const hauteur = 1; - const bordure = 0; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - largeur, hauteur, bordure, formatSrc, typeSrc, - pixel); + const niveau = 0; + const formatInterne = gl.RGBA; + const largeur = 1; + const hauteur = 1; + const bordure = 0; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + largeur, hauteur, bordure, formatSrc, typeSrc, + pixel); // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il // fonctionne indépendamment des dimensions de la vidéo. - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - return texture; + return texture; } ``` -Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : +Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : ```js function mettreAJourTexture(gl, texture, video) { - const niveau = 0; - const formatInterne = gl.RGBA; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - formatSrc, typeSrc, video); + const niveau = 0; + const formatInterne = gl.RGBA; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + formatSrc, typeSrc, video); } ``` @@ -115,33 +115,33 @@ Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l Si `copierVideo` est true, alors `mettreAJourTexture()` est appelé à chaque fois juste avant que nous appellions la fonction `dessinerScene()`. ```js - var alors = 0; + var alors = 0; - // Dessiner la scène répétitivement - function dessiner(maintenant) { - maintenant *= 0.001; // convertir en seconds - const ecartTemps = maintenant - alors; - alors = maintenant; + // Dessiner la scène répétitivement + function dessiner(maintenant) { + maintenant *= 0.001; // convertir en seconds + const ecartTemps = maintenant - alors; + alors = maintenant; - if (copierVideo) { - mettreAJourTexture(gl, texture, video); - } + if (copierVideo) { + mettreAJourTexture(gl, texture, video); + } - dessinerScene(gl, programInfo, buffers, texture, ecartTemps); + dessinerScene(gl, programInfo, buffers, texture, ecartTemps); - requestAnimationFrame(dessiner); - } - requestAnimationFrame(dessiner); + requestAnimationFrame(dessiner); + } + requestAnimationFrame(dessiner); ``` -C'est tout pour ce qu'il y a à faire pour cela ! +C'est tout pour ce qu'il y a à faire pour cela ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) ## Voir aussi -- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) +- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md index 3691a94ab7..c70f056a65 100644 --- a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} -Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. +Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. -Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. +Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. ## Définir la position des sommets du cube -Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : +Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : ```js const positions = [ @@ -57,7 +57,7 @@ Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le ]; ``` -Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. +Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. // Indiquer à WebGL comment extraire les positions du tampon des // positions dans l'attribut vertexPosition @@ -75,9 +75,9 @@ Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoi programInfo.attribLocations.vertexPosition); } -## Définir les couleurs des sommets +## Définir les couleurs des sommets -Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. +Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. ```js const faceColors = [ @@ -96,9 +96,9 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 for (j=0; j<faceColors.length; j++) { const c = faceColors[j]; - // Répéter chaque couleur quatre fois pour les quatre sommets d'une face + // Répéter chaque couleur quatre fois pour les quatre sommets d'une face colors = colors.concat(c, c, c, c); - } + } const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); @@ -107,7 +107,7 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 ## Définir le tableau des éléments -Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. +Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. ```js const indexBuffer = gl.createBuffer(); @@ -115,7 +115,7 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l // Ce tableau définit chaque face comme deux triangles, en utilisant les // indices dans le tableau des sommets pour spécifier la position de chaque - // triangle. + // triangle. const indices = [ 0, 1, 2, 0, 2, 3, // avant @@ -139,11 +139,11 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l } ``` -Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. +Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. -## Dessiner le cube +## Dessiner le cube -Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : +Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : // Indiquer à WebGL quels indices utiliser pour indexer les sommets gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices); @@ -157,16 +157,16 @@ Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessin gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); } -Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. +Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. -Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : +Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]); -À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. +À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. {{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 737b272fbe..42b8c9db22 100644 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -7,25 +7,25 @@ tags: translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL --- -{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page. +{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page. -Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes. +Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes. -Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). +Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). -## Préparation au rendu 3D +## Préparation au rendu 3D -La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera. +La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera. ```html <body> - <canvas id="glCanvas" width="640" height="480"></canvas> + <canvas id="glCanvas" width="640" height="480"></canvas> </body> ``` -### Préparation du contexte WebGL +### Préparation du contexte WebGL -La fonction `main()` dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu. +La fonction `main()` dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu. ```js main(); @@ -34,39 +34,39 @@ main(); // Début ici // function main() { - const canvas = document.querySelector("#glCanvas"); - // Initialisation du contexte WebGL - const gl = canvas.getContext("webgl"); + const canvas = document.querySelector("#glCanvas"); + // Initialisation du contexte WebGL + const gl = canvas.getContext("webgl"); - // Continuer seulement si WebGL est disponible et fonctionnel - if (!gl) { - alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); - return; - } + // Continuer seulement si WebGL est disponible et fonctionnel + if (!gl) { + alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); + return; + } // Définir la couleur d'effacement comme étant le noir, complètement opaque - gl.clearColor(0.0, 0.0, 0.0, 1.0); - // Effacer le tampon de couleur avec la couleur d'effacement spécifiée - gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + // Effacer le tampon de couleur avec la couleur d'effacement spécifiée + gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); } ``` -La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée `canvas`. +La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée `canvas`. -Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. +Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. -Si le contexte est initialisé avec succès, la variable `gl` sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan). +Si le contexte est initialisé avec succès, la variable `gl` sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan). -A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. +A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. {{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) ## Voir aussi -- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. +- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. - [WebGL Fundamentals](http://webglfundamentals.org/) -- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer. +- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer. {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} diff --git a/files/fr/web/api/webgl_api/tutorial/index.md b/files/fr/web/api/webgl_api/tutorial/index.md index 520e336ac2..852ae42ef7 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.md +++ b/files/fr/web/api/webgl_api/tutorial/index.md @@ -10,29 +10,29 @@ translation_of: Web/API/WebGL_API/Tutorial --- {{WebGLSidebar}} -[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page. +[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page. -Ce tutoriel décrit comment utiliser l'élément `<canvas>` pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu. +Ce tutoriel décrit comment utiliser l'élément `<canvas>` pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu. -## Avant que vous ne commenciez +## Avant que vous ne commenciez -L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée. +L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée. ## Dans ce tutoriel - [Commencer avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL) - - : Comment mettre en place un contexte WebGL. + - : Comment mettre en place un contexte WebGL. - [Ajouter du contenu à WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL) - - : Comment faire un rendu simple de figures planes avec WebGL. + - : Comment faire un rendu simple de figures planes avec WebGL. - [Ajouter des couleurs avec les nuanceurs](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders) - - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. -- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) - - : Montre comment tourner et déplacer des objets pour créer des animations simples. -- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) - - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). + - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. +- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) + - : Montre comment tourner et déplacer des objets pour créer des animations simples. +- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) + - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). - [Utilisation des textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL) - - : Démontrer comment appliquer des textures sur les faces d'un objet. + - : Démontrer comment appliquer des textures sur les faces d'un objet. - [Éclairage en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL) - - : Comment simuler des effets d'illumination dans votre contexte WebGL. -- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) - - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. + - : Comment simuler des effets d'illumination dans votre contexte WebGL. +- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) + - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. diff --git a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md index b1a843894d..7ec788e459 100644 --- a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md @@ -10,22 +10,22 @@ La première chose à comprendre à propos de WebGL est que contrairement au sta ## Simuler l'éclairage et les ombres en 3D -Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. +Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. Il y a trois types basiques d'éclairage : -1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. -2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. -3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. +1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. +2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. +3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre [précédent exemple avec le cube en rotation](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. +Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. 1. Nous avons besoin d'associer la **surface normale** avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet. 2. Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur. -Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. +Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. ## Créer les normales pour les sommets @@ -76,7 +76,7 @@ var vertexNormals = [ gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW); ``` -Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. +Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. Ensuite nous allons ajouter le code à la fonction `drawScene()` pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès : @@ -133,11 +133,11 @@ La première chose à faire est de mettre à jour le vertex shader en générant </script> ``` -Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. +Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas. -Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. +Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. ### Le fragment shader @@ -158,7 +158,7 @@ Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte </script> ``` -Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. +Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. Et c'est tout ! @@ -166,11 +166,11 @@ Et c'est tout ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) ## Exercices -Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. +Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc.. diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md index 8b0ab94f97..239c6364e4 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} -Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs. +Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs. -## Application de couleur aux sommets +## Application de couleur aux sommets -En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. +En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. -Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : +Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : const colors = [ 1.0, 1.0, 1.0, 1.0, // blanc @@ -34,7 +34,7 @@ Supposons que nous voulions faire un rendu en dégradé dans lequel chaque co }; } -Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. +Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs : @@ -55,7 +55,7 @@ Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doi La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un `varying`. -## Coloriage des fragments +## Coloriage des fragments Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment : @@ -65,7 +65,7 @@ Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragme } `; -Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : +Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : const fsSource = ` varying lowp vec4 vColor; @@ -77,9 +77,9 @@ Afin de choisir la couleur interpolée pour chaque pixel, nous devons le change La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau. -## Dessiner en utilisant les couleurs +## Dessiner en utilisant les couleurs -Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : +Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : const programInfo = { program: shaderProgram, @@ -113,6 +113,6 @@ Ensuite, `drawScene()` peut être modifié pour utiliser réellement ces couleur {{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index 330163b207..24a8e984c8 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -9,15 +9,15 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} -Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. +Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. -## Chargement des textures +## Chargement des textures -La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures. +La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures. -> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails. +> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails. -Le code qui charge la texture ressemble à ce qui suit : +Le code qui charge la texture ressemble à ce qui suit : // // Initialiser une texture et charger une image. @@ -52,13 +52,13 @@ Le code qui charge la texture ressemble à ce qui suit : // WebGL1 a des spécifications différentes pour les images puissances de 2 // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une - // puissance de 2 sur chacune de ses dimensions. + // puissance de 2 sur chacune de ses dimensions. if (isPowerOf2(image.width) && isPowerOf2(image.height)) { // Oui, c'est une puissance de 2. Générer les mips. gl.generateMipmap(gl.TEXTURE_2D); } else { // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage - // comme "accrocher au bord" + // comme "accrocher au bord" gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -73,15 +73,15 @@ Le code qui charge la texture ressemble à ce qui suit : return (value & (value - 1)) == 0; } -La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. +La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. -Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. +Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. -WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. +WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. -Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. +Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. -Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. +Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. // gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -90,16 +90,16 @@ Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref (" // Empêcher l'habillage selon la coordonnée t (répétition). gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); -A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. +A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. -Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. +Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. // Charger la texture const texture = loadTexture(gl, 'cubetexture.png'); -## Application de la texture sur les faces +## Application de la texture sur les faces -À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. +À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. const textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); @@ -149,17 +149,17 @@ Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire. -Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. +Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. -Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. +Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. ## Mise à jour des shaders -Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. +Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. -### Le shader de sommet +### Le shader de sommet -Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. +Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. const vsSource = ` attribute vec4 aVertexPosition; @@ -176,9 +176,9 @@ Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu } `; -Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. +Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. -### Le shader de fragment +### Le shader de fragment Le shader de fragment doit également être mis à jour : @@ -192,7 +192,7 @@ Le shader de fragment doit également être mis à jour : } `; -Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. +Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. ### Emplacements des attributs et des uniformes @@ -211,7 +211,7 @@ Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons r }, }; -## Dessin du cube texturé +## Dessin du cube texturé Les modifications apportées à la fonction `drawScene()` sont simples. @@ -229,7 +229,7 @@ Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord); } -Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : +Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : // Indiquer à WebGL que nous voulons affecter l'unité de texture 0 gl.activeTexture(gl.TEXTURE0); @@ -240,9 +240,9 @@ Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, ju // Indiquer au shader que nous avons lié la texture à l'unité de texture 0 gl.uniform1i(programInfo.uniformLocations.uSampler, 0); -WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. +WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. -Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. +Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. drawScene(gl, programInfo, buffers, texture, deltaTime); ... @@ -252,19 +252,19 @@ Arrivés ce point, le cube en rotation devrait être prêt à fonctionner. {{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) ## Textures inter-domaines -Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. +Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. Voir cet [article sur hacks.mozilla.org](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec [un exemple complet](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html). -> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. +> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. -Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. +Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. -> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. +> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. > **Note :** le support CORS pour les vidéos inter-domaines et l'attribut `crossorigin` pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}. diff --git a/files/fr/web/api/webgl_api/types/index.md b/files/fr/web/api/webgl_api/types/index.md index 1b345e92f1..7b6fab68e7 100644 --- a/files/fr/web/api/webgl_api/types/index.md +++ b/files/fr/web/api/webgl_api/types/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGL_API/Types --- {{WebGLSidebar}} -Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). +Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). ## WebGL 1 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. <table class="standard-table"> <tbody> @@ -26,7 +26,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" <td><code>GLenum</code></td> <td><code>unsigned long</code></td> <td> - Utilisé pour les enums. Voir aussi la liste des <a + Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants" >constantes</a >. @@ -108,7 +108,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" ## WebGL 2 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. <table class="standard-table"> <tbody> @@ -127,7 +127,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext ## Extensions WebGL -Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). +Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). <table class="standard-table"> <tbody> @@ -150,7 +150,7 @@ Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web | -------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------- | | {{SpecName('WebGL', "#5.1", "Types")}} | {{Spec2('WebGL')}} | Définition initiale | | {{SpecName('WebGL2', "#3.1", "Types")}} | {{Spec2('WebGL2')}} | Définit des types supplémentaires. | -| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | +| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | ## Voir aussi diff --git a/files/fr/web/api/webglbuffer/index.md b/files/fr/web/api/webglbuffer/index.md index 3ab7690e25..d11165008d 100644 --- a/files/fr/web/api/webglbuffer/index.md +++ b/files/fr/web/api/webglbuffer/index.md @@ -57,4 +57,4 @@ var tampon = gl.createBuffer(); - {{domxref("WebGLRenderingContext.createBuffer()")}} - {{domxref("WebGLRenderingContext.deleteBuffer()")}} - {{domxref("WebGLRenderingContext.isBuffer()")}} -- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} +- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} diff --git a/files/fr/web/api/webglprogram/index.md b/files/fr/web/api/webglprogram/index.md index c102390862..d3b200dd19 100644 --- a/files/fr/web/api/webglprogram/index.md +++ b/files/fr/web/api/webglprogram/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLProgram --- {{APIRef("WebGL")}} -Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. +Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. ```js var programme = gl.createProgram(); @@ -25,13 +25,13 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. +Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. ## Exemples -### Utilisation du programme +### Utilisation du programme -Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. +Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. ```js // Utiliser le programme @@ -46,9 +46,9 @@ gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); ``` -### Suppression du programme +### Suppression du programme -S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. +S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. ```js gl.deleteProgram(programme); diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.md b/files/fr/web/api/webglrenderingcontext/activetexture/index.md index 86065baf61..27b4e23422 100644 --- a/files/fr/web/api/webglrenderingcontext/activetexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/activeTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. +La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-F ### Paramètres - `texture` - - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. + - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. ### Valeur retournée @@ -28,23 +28,23 @@ Aucune. ### Exceptions -Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. +L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. ```js gl.activeTexture(gl.TEXTURE1); ``` -Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. +Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. ```js gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); ``` -Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. +Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. ```js gl.activeTexture(gl.TEXTURE0); diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.md b/files/fr/web/api/webglrenderingcontext/attachshader/index.md index 0cda2deaaa..68bb552030 100644 --- a/files/fr/web/api/webglrenderingcontext/attachshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLRenderingContext/attachShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -19,11 +19,11 @@ La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/d - `programme` - : Un {{domxref("WebGLProgram")}}. - `shader` - - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. + - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. ## Exemples -Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. +Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. ```js var programme = gl.createProgram(); diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md index 33c12df96c..8bad4008f2 100644 --- a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md @@ -24,7 +24,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> -- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; +- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; - `gl.ELEMENT_ARRAY_BUFFER` : tampon utilisé pour les indices d'éléments ; - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus : @@ -38,7 +38,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> - tampon - - : Un {{domxref ("WebGLBuffer")}} à lier. + - : Un {{domxref ("WebGLBuffer")}} à lier. ### Valeur retournée @@ -46,7 +46,7 @@ Aucune. ### Exceptions -Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. +Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. ## Exemples @@ -81,7 +81,7 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <tr> <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> @@ -94,9 +94,9 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> - <p>Définition mise à jour pour WebGL 2.</p> + <p>Définition mise à jour pour WebGL 2.</p> <p> - Ajoute de nouveaux tampons <code>cible</code> :<br /><code + Ajoute de nouveaux tampons <code>cible</code> :<br /><code >gl.COPY_READ_BUFFER</code >,<br /><code>gl.COPY_WRITE_BUFFER</code>,<br /><code >gl.TRANSFORM_FEEDBACK_BUFFER</code diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md index fd75432b79..cb41fafb32 100644 --- a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/bindTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). +La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). ## Syntaxe @@ -24,12 +24,12 @@ La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{d - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bidimensionnelle ; + - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - `gl.TEXTURE_CUBE_MAP` : une texture mappée sur un cube ; - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - `gl.TEXTURE_3D` : une texture tridimensionnelle ; - - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. - texture - : Un objet {{domxref ("WebGLTexture")}} à lier. @@ -40,11 +40,11 @@ Aucune. ### Exceptions -Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. +Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. ## Exemples -### Liaison d'une texture +### Liaison d'une texture ```js var canevas = document.getElementById('canevas'); @@ -56,7 +56,7 @@ gl.bindTexture(gl.TEXTURE_2D, texture); ### Obtention des liaisons en cours -Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. +Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. ```js gl.getParameter(gl.TEXTURE_BINDING_2D); @@ -74,21 +74,21 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); <tr> <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> Définition mise à jour pour WebGL 2.<br />Ajoute : - <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> + <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> </td> </tr> <tr> @@ -96,7 +96,7 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); {{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md index acab216dbb..2f9225277d 100644 --- a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md +++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md @@ -36,33 +36,33 @@ La méthode **`WebGLRenderingContext.bufferData()`** de l'[API WebGL](/fr-FR/doc - `gl.COPY_READ_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.COPY_WRITE_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.TRANSFORM_FEEDBACK_BUFFER` : tampon pour les opérations de retour de transformation ; - - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; + - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; - `gl.PIXEL_PACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels ; - `gl.PIXEL_UNPACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels. - taille - - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. + - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. - donneesSrc {{optional_inline}} - - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. + - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. - utilisation - : Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : - - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : + - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : - - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. + - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. - decalageSrc - : Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon. -- `longueur` {{optional_inline}} +- `longueur` {{optional_inline}} - : Un {{domxref("GLuint")}} valant 0 par défaut. ### Valeur retournée @@ -71,9 +71,9 @@ Aucune. ### Exceptions -- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. -- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. -- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. +- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. +- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. +- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. ## Exemples @@ -89,7 +89,7 @@ gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); ### Récupération de l'information de tampon -Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. +Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. ```js gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.md b/files/fr/web/api/webglrenderingcontext/canvas/index.md index e6d36646bd..c9f6d0d537 100644 --- a/files/fr/web/api/webglrenderingcontext/canvas/index.md +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.md @@ -19,13 +19,13 @@ La propriété `WebGLRenderingContext.canvas` est une référence en lecture seu ### Valeur retournée -Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. +Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. ## Exemples ### Élément canevas -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> @@ -41,7 +41,7 @@ gl.canvas; // HTMLCanvasElement ### Canevas hors écran -Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. +Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. ```js var horsEcran = new OffscreenCanvas(256, 256); diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.md b/files/fr/web/api/webglrenderingcontext/clear/index.md index 803a50fd26..a21224f44b 100644 --- a/files/fr/web/api/webglrenderingcontext/clear/index.md +++ b/files/fr/web/api/webglrenderingcontext/clear/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/WebGLRenderingContext/clear --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. +La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. -Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. +Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. -Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. +Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. ## Syntaxe @@ -25,7 +25,7 @@ Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecte - `masque` - - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : + - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : - `gl.COLOR_BUFFER_BIT` - `gl.DEPTH_BUFFER_BIT` @@ -37,18 +37,18 @@ Aucune. ### Exceptions -Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -La méthode `clear()` accepte des valeurs multiples. +La méthode `clear()` accepte des valeurs multiples. ```js gl.clear(gl.DEPTH_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); ``` -Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. +Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. ```js gl.getParameter(gl.COLOR_CLEAR_VALUE); diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.md b/files/fr/web/api/webglrenderingcontext/compileshader/index.md index e0334e3e36..deab94fb53 100644 --- a/files/fr/web/api/webglrenderingcontext/compileshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/compileShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/ ### Paramètres - `shader` - - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. + - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.md b/files/fr/web/api/webglrenderingcontext/createprogram/index.md index cf6ce1d9b9..56613c8b85 100644 --- a/files/fr/web/api/webglrenderingcontext/createprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.md @@ -23,11 +23,11 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. +Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. ## Exemples -### Création d'un programme WebGL +### Création d'un programme WebGL ```js var programme = gl.createProgram(); @@ -44,7 +44,7 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. +Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.md b/files/fr/web/api/webglrenderingcontext/createshader/index.md index a2e973949c..8de71539dd 100644 --- a/files/fr/web/api/webglrenderingcontext/createshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/createshader/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/createShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. +La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. ## Syntaxe @@ -21,11 +21,11 @@ La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/do ### Paramètres - `type` - - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` + - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` ## Exemples -Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. +Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.md b/files/fr/web/api/webglrenderingcontext/createtexture/index.md index a073857b80..a856c96784 100644 --- a/files/fr/web/api/webglrenderingcontext/createtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.md @@ -24,13 +24,13 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. +Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. ## Exemples -Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -### Création d'une texture +### Création d'une texture ```js var canevas = document.getElementById('canevas'); @@ -57,7 +57,7 @@ var texture = gl.createTexture(); {{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td>Page man de l’API OpenGL (similaire).</td> + <td>Page man de l’API OpenGL (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md index 47fbedaa04..b544dfdcdf 100644 --- a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteBuffer --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. +La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md index 82f2677183..5388dbf0f8 100644 --- a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteShader --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. +La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md index f9d4ce2d0d..953099804b 100644 --- a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md +++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/drawArrays --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. +La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. ## Syntaxe @@ -23,18 +23,18 @@ La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : - - `gl.POINTS` : dessine un seul point ; - - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; - - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; - - `gl.LINES` : dessine une ligne entre une paire de sommets ; + - `gl.POINTS` : dessine un seul point ; + - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; + - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; + - `gl.LINES` : dessine une ligne entre une paire de sommets ; - [`gl.TRIANGLE_STRIP`](https://en.wikipedia.org/wiki/Triangle_strip) - [`gl.TRIANGLE_FAN`](https://en.wikipedia.org/wiki/Triangle_fan) - - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. + - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. - `premier` - - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. + - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. - `compte` - - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. + - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. ### Valeur retournée @@ -42,9 +42,9 @@ None. ### Exceptions -- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. -- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. -- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. +- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. +- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. +- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. ## Exemples @@ -64,10 +64,7 @@ gl.drawArrays(gl.POINTS, 0, 8); <tr> <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td> <td>{{Spec2('WebGL')}}</td> - <td> - <p> </p> - Définition initiale. - </td> + <td>Définition initiale.</td> </tr> <tr> <td> diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.md b/files/fr/web/api/webglrenderingcontext/enable/index.md index d207dd636e..ee111a31cc 100644 --- a/files/fr/web/api/webglrenderingcontext/enable/index.md +++ b/files/fr/web/api/webglrenderingcontext/enable/index.md @@ -22,7 +22,7 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn - `fon` - - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : | Constante | Description | | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -30,17 +30,17 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn | `gl.CULL_FACE` | Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}. | | `gl.DEPTH_TEST` | Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}. | | `gl.DITHER` | Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur. | - | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | + | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | | `gl.SAMPLE_ALPHA_TO_COVERAGE` | Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha. | | `gl.SAMPLE_COVERAGE` | Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}. | | `gl.SCISSOR_TEST` | Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}. | | `gl.STENCIL_TEST` | Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}. | - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : | Constante | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | + | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | ### Valeur retournée @@ -52,7 +52,7 @@ Aucune. gl.enable(gl.DITHER); ``` -Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : +Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : ```js gl.isEnabled(gl.DITHER); @@ -63,7 +63,7 @@ gl.isEnabled(gl.DITHER); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ | -| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL ES 2.0. | | {{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API OpenGL ES 3.0 API. | diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md index 0ef32e590c..4f7b56545d 100644 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md @@ -19,13 +19,13 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray --- {{APIRef("WebGL")}} -La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs. +La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs. -> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. +> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs. -De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. +De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. ## Syntaxe @@ -42,14 +42,14 @@ De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils ### Erreurs -Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. +Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. - `WebGLRenderingContext.INVALID_VALUE` - - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. + - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. ## Exemple -Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet. +Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet. ```js gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); @@ -66,11 +66,11 @@ gl.drawArrays(gl.TRIANGLES, 0, vertexCount); > **Note :** Cet extrait de code provient de [la fonction animateScene()](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene) dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action. -Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. +Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. -Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). +Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). -Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. +Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. Avec l'association définie entre le tampon des sommets de notre forme et l'attribut `aVertexPosition` utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}. @@ -106,7 +106,7 @@ Avec l'association définie entre le tampon des sommets de notre forme et l'attr ## Voir aussi -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) -- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) -- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) +- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) +- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}} diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md index c9d4cdbca6..a034a62dd0 100644 --- a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md +++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/WebGLRenderingContext/generateMipmap --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. +La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. -Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. +Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. ## Syntaxe @@ -24,14 +24,14 @@ Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipm - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. ### Valeur retournée @@ -47,9 +47,9 @@ gl.generateMipmap(gl.TEXTURE_2D); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------- | -| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API (similaire) d'OpenGL ES 2.0. | -| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | +| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md index 8242d0739b..8bb49977b6 100644 --- a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.getAttribLocation()`** de l'[API WebGL](/fr ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. + - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. - nom - - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. + - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. ### Valeur retournée -Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. +Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.md b/files/fr/web/api/webglrenderingcontext/geterror/index.md index cd310e0a29..3831b1a753 100644 --- a/files/fr/web/api/webglrenderingcontext/geterror/index.md +++ b/files/fr/web/api/webglrenderingcontext/geterror/index.md @@ -31,7 +31,7 @@ Aucun. | `gl.INVALID_OPERATION` | La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné. | | `gl.INVALID_FRAMEBUFFER_OPERATION` | Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture. | | `gl.OUT_OF_MEMORY` | Plus assez de mémoire restante pour exécuter la commande. | -| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | +| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md index e89237d889..884ccb5545 100644 --- a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md @@ -25,13 +25,13 @@ La méthode `WebGLRenderingContext.getShaderParameter()` de l'API WebGL retourne - : Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : - - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. - - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. - - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). + - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. + - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. + - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). ### Valeur retournée -Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). +Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). ## Exemples @@ -44,7 +44,7 @@ gl.getShaderParameter(shader, gl.SHADER_TYPE); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- | | {{SpecName('WebGL', "#5.14.9", "getShaderParameter")}} | {{Spec2('WebGL')}} | Définition initiale. | -| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | +| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md index 38342d8c00..c6c8478a87 100644 --- a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/getTexParameter --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. +La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. ## Syntaxe @@ -22,18 +22,18 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. - Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. - nomp - - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : + - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : <table class="standard-table"> <thead> @@ -71,7 +71,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_WRAP_S</code></td> <td>{{domxref("GLenum")}}</td> - <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -107,7 +107,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_BASE_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau de mipmap de texture</td> + <td>Niveau de mipmap de texture</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -144,7 +144,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_MAX_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau maximum de mipmap de texture en tableau</td> + <td>Niveau maximum de mipmap de texture en tableau</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -163,7 +163,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <td><code>gl.TEXTURE_WRAP_R</code></td> <td>{{domxref("GLenum")}}</td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), @@ -175,7 +175,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr ### Valeur retournée -Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. +Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md index 27f389fd28..0d35e4663f 100644 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md @@ -14,7 +14,7 @@ tags: - getUniformLocation translation_of: Web/API/WebGLRenderingContext/getUniformLocation --- -{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : +{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : - {{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}} - : Retourne la valeur de l'uniform à l'emplacement indiqué. @@ -40,9 +40,9 @@ L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL. Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place. -`WebGLUniformLocation` est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform. +`WebGLUniformLocation` est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform. -> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. +> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. ### Erreurs diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md index bc696a54f4..f0d72924e8 100644 --- a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md @@ -23,11 +23,11 @@ La méthode **`WebGLRenderingContext.isBuffer()`** de l'[API WebGL](/fr-FR/docs/ ### Valeur retournée -Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. +Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. ## Exemples -### Création d'un tampon +### Création d'un tampon ```js var canevas = document.getElementById('canevas'); diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.md b/files/fr/web/api/webglrenderingcontext/shadersource/index.md index 91b7d1629e..d675986fd2 100644 --- a/files/fr/web/api/webglrenderingcontext/shadersource/index.md +++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/shaderSource --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. +La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/ ### Parameters - shader - - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. + - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. - source - - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. + - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md index c8d54e80c9..2622f2ea20 100644 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md @@ -40,24 +40,24 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_POSITIVE_Z` : face Z positive pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z` : face Z négative pour une texture mappée sur un cube. - `niveau` - - : Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap. + - : Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap. - `formatinterne` - : Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles : - - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; - - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; - - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; - - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; - - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; + - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; + - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; + - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; + - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; + - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; - lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : - `gl.DEPTH_COMPONENT` @@ -109,10 +109,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles : - - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; - - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; - - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; - - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; + - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; + - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; + - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; + - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; - lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : - `gl.UNSIGNED_SHORT` @@ -140,7 +140,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - `gl.UNSIGNED_INT_10F_11F_11F_REV` - `gl.UNSIGNED_INT_5_9_9_9_REV` - `gl.UNSIGNED_INT_24_8` - - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) + - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) - `pixels` @@ -148,10 +148,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ArrayBufferView")}}, - - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; - - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; - - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; - - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; + - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; + - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; + - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; + - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; - {{domxref("ImageData")}}, - {{domxref("HTMLImageElement")}}, @@ -160,7 +160,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ImageBitmap")}}. - **`decalage`** - - : (WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. + - : (WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. ### Valeur retournée @@ -184,14 +184,14 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); <tr> <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td> @@ -203,7 +203,7 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); {{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.md b/files/fr/web/api/webglrenderingcontext/texparameter/index.md index 705a95ba60..83d82e2a4e 100644 --- a/files/fr/web/api/webglrenderingcontext/texparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/texParameter --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. +Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. ## Syntaxe @@ -23,16 +23,16 @@ Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL]( - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionelle. - - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionelle. + - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. -Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. +Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. <table class="standard-table"> <thead> @@ -74,7 +74,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de </tr> <tr> <td><code>gl.TEXTURE_WRAP_T</code></td> - <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -137,7 +137,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de <tr> <td><code>gl.TEXTURE_WRAP_R</code></td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.md b/files/fr/web/api/webglrenderingcontext/uniform/index.md index 6dea122f90..b1f460cf16 100644 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/WebGLRenderingContext/uniform --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. +Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. -> **Note :** Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}. +> **Note :** Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}. ## Syntaxe @@ -40,15 +40,15 @@ Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebG ### Paramètres - emplacement - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. - `valeur, v0, v1, v2, v3` - - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : + - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : - - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). - - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). - - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). - - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). + - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). + - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). + - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). + - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md index 7b3c46bc01..6193468153 100644 --- a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md @@ -31,11 +31,11 @@ Les trois versions de cette méthode (`uniformMatrix2fv()`, `uniformMatrix3fv()` ### Paramètres - `emplacement` - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. - `transposer` - - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. + - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. - `valeur` - - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. + - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. ### Valeur retournée @@ -80,4 +80,4 @@ gl.uniformMatrix2fv(loc, false, [2.1, 2.2]); ## Voir aussi - {{domxref("WebGLRenderingContext.uniform()")}} -- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. +- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.md b/files/fr/web/api/webglrenderingcontext/useprogram/index.md index 5c9c37bf30..84af6755f8 100644 --- a/files/fr/web/api/webglrenderingcontext/useprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.md @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.useProgram()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} à utiliser. + - : Un {{domxref("WebGLProgram")}} à utiliser. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md index 67b5679fe0..c284555148 100644 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md @@ -25,29 +25,29 @@ La méthode **`WebGLRenderingContext.vertexAttribPointer()`** de l'[API WebGL](/ - : Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4. - `type` - - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : + - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : - `gl.BYTE` : entier signé sur 8 bits, à valeurs dans \[-128, 127] - `gl.SHORT` : entier signé sur 16 bits, à valeurs dans \[-32768, 32767] - `gl.UNSIGNED_BYTE` : entier non signé sur 8 bits, à valeurs dans \[0, 255] - `gl.UNSIGNED_SHORT` : entier non signé sur 16 bits, à valeurs dans \[0, 65535] - `gl.FLOAT` : nombre flottant IEEE 32 bits - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : - - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits + - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits - `normalise` - - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. + - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. - Pour les types `gl.BYTE` et `gl.SHORT`, normalise les valeurs à \[-1, 1] si `true`. - Pour les types `gl.UNSIGNED_BYTE` et `gl.UNSIGNED_SHORT`, normalise les valeurs à \[0, 1] si `true`. - Pour les types `gl.FLOAT` et `gl.HALF_FLOAT`, ce paramètre est sans effet. - `pas` - - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. + - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. - `decalage` - - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. + - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. ### Valeur retournée @@ -55,26 +55,26 @@ Aucune. ### Exceptions -- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. -- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). +- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. +- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). ## Description -Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. +Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. -Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. +Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler `gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure. ### Indice d'attribut -Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : +Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : - Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à `gl.vertexAttribPointer()`. - En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à `gl.vertexAttribPointer()`. - Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. + Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. ### Attributs entiers @@ -84,19 +84,19 @@ Bien que le `ArrayBuffer` puisse être rempli à la fois d'entiers et de flottan Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler `{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}` pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec `gl.vertexAttribPointer()`. -De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. +De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. La valeur par défaut est `vec4(0.0, 0.0, 0.0, 1.0)` par défaut, mais nous pouvons spécifier une valeur par défaut différente avec `{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}`. -Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. +Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. -### Interrogation des paramètres en cours +### Interrogation des paramètres en cours Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application. ## Exemples -Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : +Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : 1. **position :** nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ; 2. **vecteur normal :** nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage \[-1, 1] ; @@ -163,9 +163,9 @@ const response = await fetch('assets/geometry.bin'); const tampon = await response.arrayBuffer(); ``` -### Utiliser le tampon de tableaux avec WebGL +### Utiliser le tampon de tableaux avec WebGL -Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : +Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : ```js // Lier le tampon de tableaux à l'Objet Tampon de Sommets @@ -174,7 +174,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, ots); gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); ``` -Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : +Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : ```js // Décrire la disposition du tampon : @@ -197,7 +197,7 @@ gl.bindAttribLocation(shaderProgram, 2, 'texUV'); gl.linkProgram(shaderProgram); ``` -soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader. +soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader. ```js const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); @@ -245,4 +245,4 @@ gl.enableVertexAttribArray(texUVLoc); ## Voir aussi -- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL +- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.md b/files/fr/web/api/webglrenderingcontext/viewport/index.md index beed6333a7..64ae294ac9 100644 --- a/files/fr/web/api/webglrenderingcontext/viewport/index.md +++ b/files/fr/web/api/webglrenderingcontext/viewport/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/viewport --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. +La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. ## Syntaxe @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - `x` - - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - `y` - - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - largeur - - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. - height - - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. ### Valeur retournée @@ -34,7 +34,7 @@ Aucune. ### Erreurs déclenchées -Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. +Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. ## Exemples @@ -51,7 +51,7 @@ gl.getParameter(gl.MAX_VIEWPORT_DIMS); // Par ex., Int32Array[16384, 16384] ``` -Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. +Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. ```js gl.getParameter(gl.VIEWPORT); diff --git a/files/fr/web/api/webglshader/index.md b/files/fr/web/api/webglshader/index.md index 291bdcf503..99b31cc20b 100644 --- a/files/fr/web/api/webglshader/index.md +++ b/files/fr/web/api/webglshader/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGLShader --- {{APIRef("WebGL")}} -Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. +Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. ## Description -Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. +Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. ```js function creerShader (gl, codeSource, type) { @@ -30,13 +30,13 @@ function creerShader (gl, codeSource, type) { } ``` -Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. +Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. ## Exemples -### Création d'un shader de sommet +### Création d'un shader de sommet -Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. +Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. ```js var sourceShaderDeSommet = @@ -49,7 +49,7 @@ var sourceShaderDeSommet = var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER) ``` -### Création d'un shader de fragment +### Création d'un shader de fragment ```js var sourceShaderDeFragment = diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md index 938107b7b0..8bb0cb8bf6 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -7,15 +7,15 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling translation_of_original: Web/API/WebRTC_API/WebRTC_basics original_slug: Web/Guide/API/WebRTC/WebRTC_basics --- -Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne +Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne -## Contenu semi-ancien, à partir de RTCPeerConnection +## Contenu semi-ancien, à partir de RTCPeerConnection -Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. +Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. ## Usage basique -l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. +l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer: @@ -42,9 +42,9 @@ function error(err) { } ``` -**Initialiser un appel** +**Initialiser un appel** -l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. +l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. ```js // recuperer la liste des "amis" a partir du serveur @@ -65,9 +65,9 @@ navigator.getUserMedia({video: true}, function(stream) { **Répondre à un appel** -sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. +sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. -Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. +Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. ```js var offer = getOfferFromFriend(); @@ -87,7 +87,7 @@ navigator.getUserMedia({video: true}, function(stream) { **Gestion de la réponse** -retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. +retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. ```js // pc a été déclaré précédemment, lors de l'envoi de l'offre. @@ -99,7 +99,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides. -> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. +> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. ## Note diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md index 95aca76612..485e6f8821 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.md +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md @@ -182,7 +182,7 @@ Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons }, false); ``` -Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. +Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. ```js function takepicture() { diff --git a/files/fr/web/api/websocket/binarytype/index.md b/files/fr/web/api/websocket/binarytype/index.md index 9cb18c285b..0a66848f48 100644 --- a/files/fr/web/api/websocket/binarytype/index.md +++ b/files/fr/web/api/websocket/binarytype/index.md @@ -15,7 +15,7 @@ var binaryType = aWebSocket.binaryType; ## Valeur -Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : +Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : - `"blob"` - : Utilise des objets [`Blob`](/fr/docs/Web/API/Blob) pour les données binaires. Il s'agit de la valeur par défaut. diff --git a/files/fr/web/api/websockets_api/index.md b/files/fr/web/api/websockets_api/index.md index e82c924000..d8cc4685f7 100644 --- a/files/fr/web/api/websockets_api/index.md +++ b/files/fr/web/api/websockets_api/index.md @@ -21,14 +21,14 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d > **Note :** Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées. -## Interfaces +## Interfaces - [`WebSocket`](/fr/docs/WebSockets/Writing_WebSocket_client_applications) - - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. + - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. - [`CloseEvent`](/fr/docs/Web/API/CloseEvent) - - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. + - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. - [`MessageEvent`](/fr/docs/Web/API/MessageEvent) - - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. + - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. ## Guides @@ -39,19 +39,19 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d ## Outils -- [HumbleNet](https://humblenet.github.io/) :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications. -- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). -- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). -- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). -- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution. +- [HumbleNet](https://humblenet.github.io/) :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications. +- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). +- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). +- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). +- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution. - [Node.js](http://nodejs.org). -- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). -- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). -- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux de WebSockets lorsqu'elles sont disponibles, dans le cas contraire elle utilise d'autres technos, sans modifier votre application. -- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). -- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). +- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). +- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). +- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux de WebSockets lorsqu'elles sont disponibles, dans le cas contraire elle utilise d'autres technos, sans modifier votre application. +- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). +- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). - [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client). -- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. +- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. ## Ressources liées diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md index 19714ade67..eb75b9dab1 100644 --- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md +++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -20,7 +20,7 @@ WebSockets communique via une connexion [TCP (Transmission Control Protocol)](ht Constructeur : ```java -ServerSocket(int port) +ServerSocket(int port) ``` Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre _port_. @@ -58,7 +58,7 @@ Méthodes : Méthode : ```java -write(byte[] b, int off, int len) +write(byte[] b, int off, int len) ``` En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d'octets fourni. @@ -68,7 +68,7 @@ En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d' Méthodes : ```java -read(byte[] b, int off, int len) +read(byte[] b, int off, int len) ``` Reads up to _len_ bytes of data from the input stream into an array of bytes. diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md index 4becad44ad..8d22b4ff58 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -3,7 +3,7 @@ title: Ecrire des applications client WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications --- -Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est dépendant d'aucune plateforme. +Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est dépendant d'aucune plateforme. > **Note :** Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets. @@ -16,19 +16,19 @@ Pour utiliser le protocole WebSocket, il faut créer un objet [`WebSocket`](/en/ Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel : WebSocket WebSocket( - in DOMString url, - in optional DOMString protocols + in DOMString url, + in optional DOMString protocols ); WebSocket WebSocket( - in DOMString url, - in optional DOMString[] protocols + in DOMString url, + in optional DOMString[] protocols ); - `url` - : L'URL à laquelle le client se connecte, et le serveur répond. - `protocols` {{ optional_inline() }} - - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. + - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. Le constructeur peut renvoyer des exceptions: @@ -39,13 +39,13 @@ Le constructeur peut renvoyer des exceptions: ### Erreurs de connexion -Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. +Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la [RFC 6455, Section 7.4](http://tools.ietf.org/html/rfc6455#section-7.4) est envoyé à travers l'évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent). ### Exemples -Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. +Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. ```js var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); @@ -61,13 +61,13 @@ var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protoco Une fois la connexion établie (c'est-à-dire quand `readyState` a la valeur `OPEN`), la propriété `protocol` indique quel protocole le server a sélectionné. -Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec `ws://www.example.com` ou `wss://www.example.com`. +Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec `ws://www.example.com` ou `wss://www.example.com`. ## Envoi de données vers le serveur -Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : +Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : -Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). +Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). > **Note :** Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne. @@ -75,7 +75,7 @@ Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet é ```js exampleSocket.onopen = function (event) { - exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); + exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); }; ``` @@ -88,20 +88,20 @@ Il peut être utile d'utiliser [JSON](/en/JSON) pour envoyer des données comple function sendText() { // Création d'un objet msg qui contient les données // dont le serveur a besoin pour traiter le message - var msg = { - type: "message", - text: document.getElementById("text").value, - id: clientID, - date: Date.now() - }; + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; - // Envoi de l'objet msg à travers une chaîne formatée en JSON - exampleSocket.send(JSON.stringify(msg)); + // Envoi de l'objet msg à travers une chaîne formatée en JSON + exampleSocket.send(JSON.stringify(msg)); - // Efface le texte de l'élément input + // Efface le texte de l'élément input // afin de recevoir la prochaine ligne de texte // que l'utilisateur va saisir - document.getElementById("text").value = ""; + document.getElementById("text").value = ""; } ``` @@ -110,8 +110,8 @@ function sendText() { WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement `onmessage`. Pour écouter les données reçues, on peut écrire quelque chose comme: ```js -exampleSocket.onmessage = function (event) { - console.log(event.data); +exampleSocket.onmessage = function (event) { + console.log(event.data); } ``` diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md index 934dc5e14f..87fc5cf908 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md @@ -3,15 +3,15 @@ title: Écriture de serveurs WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_servers translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers --- -Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. +Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "[Berkeley sockets](https://fr.wikipedia.org/wiki/Berkeley_sockets)", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur. Avant de débuter, vous **devez** connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le _minimum_ des connaissances requises et non un guide ultime. -> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. +> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. -Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des *cookies* et d'autres méthodes d'authentification. +Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des *cookies* et d'autres méthodes d'authentification. ## La "poignée de mains" du WebSocket @@ -19,9 +19,9 @@ En tout premier lieu, le serveur doit écouter les connexions sockets entrantes > **Attention :** Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. -La *poignée de mains* est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. +La *poignée de mains* est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. -### La requête de _poignée de mains_ côté client +### La requête de _poignée de mains_ côté client Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de _poignée de main_. Vous devez donc savoir comment interprêter cette requête. En premier, le **client** enverra tout d'abord une requête HTTP correctement formée. La requête **doit** être à la version 1.1 ou supérieure et la méthode **doit** être de type GET : @@ -32,40 +32,40 @@ Même si vous construisez votre serveur au profit des WebSockets, votre client d Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 -Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. +Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. -Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. +Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. -> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. +> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. > **Note :** L'URI de la requête (`/chat` dans notre cas) n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple, `exemple.com/chat` peut être associée à une API/une application de dialogue multiutilisateurs lorsque `/game` invoquera son homologue pour un jeu. -> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. +> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. -### La réponse du serveur lors de la poignée de mains +### La réponse du serveur lors de la poignée de mains -Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). +Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= -En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). +En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). -> **Note :** Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). +> **Note :** Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). -Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! +Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! -> **Note :** Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce **avant** la fin du processus de poignée de main. +> **Note :** Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce **avant** la fin du processus de poignée de main. -### Suivre les clients confirmés +### Suivre les clients confirmés -Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). +Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). -## L'échange de trames de données +## L'échange de trames de données -Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. +Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. ### Format @@ -73,66 +73,66 @@ Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel m Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : - 0 1 2 3 - 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 + 0 1 2 3 + 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 +-+-+-+-+-------+-+-------------+-------------------------------+ - |F|R|R|R| opcode|M| Payload len | Extended payload length | - |I|S|S|S| (4) |A| (7) | (16/64) | - |N|V|V|V| |S| | (if payload len==126/127) | - | |1|2|3| |K| | | + |F|R|R|R| opcode|M| Payload len | Extended payload length | + |I|S|S|S| (4) |A| (7) | (16/64) | + |N|V|V|V| |S| | (if payload len==126/127) | + | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + - 4 5 6 7 + 4 5 6 7 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Extended payload length continued, if payload len == 127 | + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ - 8 9 10 11 + 8 9 10 11 + - - - - - - - - - - - - - - - +-------------------------------+ - | |Masking-key, if MASK set to 1 | + | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ - 12 13 14 15 + 12 13 14 15 +-------------------------------+-------------------------------+ - | Masking-key (continued) | Payload Data | + | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + - : Payload Data continued ... : + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Payload Data continued ... | + | Payload Data continued ... | +---------------------------------------------------------------+ RSV1-3 peuvent être ignorés, ils concernent les extensions. -Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. +Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé. Le champ `opcode` définit comment est interpêtée la _charge utile_ (`payload data`) : ainsi `0x0` indique la consigne "continuer", `0x1` indique du texte (qui est systématiquement encodé en UTF-8), `0x2` pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, `0x3` à 0x7 et `0xB` à `0xF` n'ont pas de significations particulières. -Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. +Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. -### Connaître la taille des *données utiles* +### Connaître la taille des *données utiles* -Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : +Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : 1. (_étape 1_) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile. - S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. + S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. 2. (_étape 2_) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. 3. (_étape 3_) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0. -### Lire et démasquer les données +### Lire et démasquer les données -Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : +Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : var DECODED = ""; for (var i = 0; i < ENCODED.length; i++) { DECODED[i] = ENCODED[i] ^ MASK[i % 4]; } -> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). +> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). -### La fragmentation des messages +### La fragmentation des messages Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appelle la _fragmentation des messages_. La fragmentation est seulement possible avec les opcodes de `0x0` à `0x2`. -Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : +Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : Client: FIN=1, opcode=0x1, msg="hello" Server: (process complete message immediately) Hi. @@ -143,40 +143,40 @@ Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange Client: FIN=1, opcode=0x0, msg="year!" Server: (process complete message) Happy new year to you too! -La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. -Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. +La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. +Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. -## Pings-Pongs : le "coeur" des WebSockets +## Pings-Pongs : le "coeur" des WebSockets -A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. +A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. -Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. +Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. > **Note :** Lorsque plusieurs pings sont envoyés à la suite, un **seul** pong suffit en réponse (_le plus récent pour la donnée utile renvoyée_). -## Clore la connexion +## Clore la connexion -La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. +La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. ## Diverses informations utiles -> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). +> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). Les extensions et sous-protocoles des WebSockets sont négociés durant [l'échange des entêtes de la poignée de mains](#PoignéeDeMain). Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : **le contrôle des extensions agit sur les trames** ce qui modifie la charge utile ; **alors que les sous-protocoles modifient uniquement la charge utile,** et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). -> **Attention :** Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). +> **Attention :** Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). ### Les extensions L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. -> **Note :** Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. +> **Note :** Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. -### Les sous-protocoles +### Les sous-protocoles Les sous-protocoles sont à comparer à [un schéma XML](https://en.wikipedia.org/wiki/XML_schema) ou [une déclaration de DocType](https://en.wikipedia.org/wiki/Document_Type_Definition). Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (_et intangible : le client se voit imposer la mise en oeuvre par le serveur_), bien que les deux doivent l'accepter pour communiquer ensemble. -> **Note :** Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. +> **Note :** Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : @@ -194,11 +194,11 @@ Le serveur doit désormais choisir l'un des protocoles suggérés par le client Sec-WebSocket-Protocol: soap -> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). +> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous **devez disposer** d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. -> **Note :** Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. +> **Note :** Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. ## Contenus associés diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md index eaf25ee8e6..5b46a56c61 100644 --- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md @@ -16,7 +16,7 @@ Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ## L'API Gamepad -L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. +L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article [Utilisez l'API Gamepad](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), et [Implementer des contrôles en utilisant l'API Gamepad](/en-US/docs/Games/Techniques/Controls_Gamepad_API). diff --git a/files/fr/web/api/webvtt_api/index.md b/files/fr/web/api/webvtt_api/index.md index 6031c99c90..f6dd796a3c 100644 --- a/files/fr/web/api/webvtt_api/index.md +++ b/files/fr/web/api/webvtt_api/index.md @@ -83,7 +83,7 @@ Réexaminons le premier exemple, et observons la structure plus précisément. Dans chaque réplique: -- La première ligne commence par un temps correspondant au moment où il apparait. +- La première ligne commence par un temps correspondant au moment où il apparait. - Sur la même ligne nous avons une chaîne `-->`. - Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte. - Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher. @@ -96,7 +96,7 @@ Il est important de ne pas utiliser de ligne vide sans réplique, par exemple en Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire. -Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. +Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. Un commentaire est constitué de ces trois composants: diff --git a/files/fr/web/api/webxr_device_api/index.md b/files/fr/web/api/webxr_device_api/index.md index 512cc85f97..fab5c5825f 100644 --- a/files/fr/web/api/webxr_device_api/index.md +++ b/files/fr/web/api/webxr_device_api/index.md @@ -13,52 +13,52 @@ translation_of: Web/API/WebXR_Device_API --- {{DefaultAPISidebar("WebXR Device API")}} -**WebXR** est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). +**WebXR** est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). -L'**API de périphérique WebXR** implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée. +L'**API de périphérique WebXR** implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée. -Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur. +Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur. Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes: - Trouver un périphérique de sortie VR ou AR compatible - Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée - (Optionellement) refléter la sortie sur un affichage 2D -- Créer des vecteurs représentant les mouvements des commandes d'entrée +- Créer des vecteurs représentant les mouvements des commandes d'entrée -Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. +Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. ## Les concepts et l'utilisation des périphériques WebXR -Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality. +Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality. -Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe. +Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe. L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires. ## Accéder à l'API WebXR -Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. +Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. - {{domxref("navigator.xr")}} {{ReadOnlyInline}} - - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. + - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. ## Les interfaces WebXR - {{DOMxRef("XRSystem")}} - - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. + - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. - {{DOMxRef("XRFrame")}} - - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. + - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. - {{DOMxRef("XRRenderState")}} - - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. + - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. - {{DOMxRef("XRSession")}} - - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. + - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. - {{DOMxRef("XRSpace")}} - - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. + - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. - {{DOMxRef("XRReferenceSpace")}} - - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. + - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. - {{DOMxRef("XRBoundedReferenceSpace")}} - - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. + - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. - {{DOMxRef("XRView")}} - : Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques. - {{DOMxRef("XRViewport")}} @@ -68,15 +68,15 @@ Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, - {{DOMxRef("XRPose")}} - : Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}. - {{DOMxRef("XRViewerPose")}} - - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. + - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. - {{DOMxRef("XRInputSource")}} - - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. + - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. - {{DOMxRef("XRWebGLLayer")}} - - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. + - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. ### Interfaces événementielles -Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. +Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. - {{domxref("XRInputSourceEvent")}} - : Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés. @@ -87,12 +87,12 @@ Les interfaces suivantes sont utilisées pour représenter les événements uti - {{domxref("XRSessionEvent")}} - : Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation -## Extensions de l'API WebGL +## Extensions de l'API WebGL L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR. - {{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}} - - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. + - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. ## Guides et tutoriels @@ -112,37 +112,37 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Starting up and shutting down a WebXR session](/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown) - : Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR. - [Geometry and reference spaces in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Geometry) - - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. + - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. - [Spatial tracking in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking) - : Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues. - [Rendering and the WebXR frame animation callback](/en-US/docs/Web/API/WebXR_Device_API/Rendering) - - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. + - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. - [Viewpoints and viewers: Simulating cameras in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Cameras) - - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. + - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. - [Lighting a WebXR setting](/en-US/docs/Web/API/WebXR_Device_API/Lighting) - : Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes. - [Using bounded reference spaces](/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces) - - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. + - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. ### Rendre interactif - [Movement, orientation, and motion: A WebXR example](/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion) - - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. + - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. - [Inputs and input sources](/en-US/docs/Web/API/WebXR_Device_API/Inputs) - : Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques. - [Targeting and hit detection](/en-US/docs/Web/API/Web_Audio_API/Targeting) - - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. + - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. - [Using WebXR input profiles](/en-US/docs/Web/API/WebXR_Device_API/Input_profiles) - - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. + - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. - [Supporting advanced controllers and gamepads in WebXR applications](/en-US/docs/Web/WebXR_Device_API/Gamepads) - - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. + - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. ### Performance and sécurité - [WebXR performance guide](/en-US/docs/Web/API/WebXR_Device_API/Performance) - : Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR. - [Permissions and security for WebXR](/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security) - - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. + - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. ### Inclure d'autres médias @@ -165,6 +165,6 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Graphics on the web](/en-US/docs/Web/Guide/Graphics) - [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) -- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web +- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web - [Canvas API](/en-US/docs/Web/API/Canvas_API): Le dessin en 2D pour le web - [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial) diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md index 501056191e..9efdaf9108 100644 --- a/files/fr/web/api/window/alert/index.md +++ b/files/fr/web/api/window/alert/index.md @@ -21,9 +21,9 @@ Affiche un dialogue d'alerte contenant le texte spécifié. ### Exemple - window.alert("Bonjour !"); + window.alert("Bonjour !"); -produira : +produira :  @@ -31,7 +31,7 @@ produira : Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message. -Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md index 1366a2ac23..8063c37a22 100644 --- a/files/fr/web/api/window/applicationcache/index.md +++ b/files/fr/web/api/window/applicationcache/index.md @@ -3,11 +3,11 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. +> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. {{APIRef}} -Retourne une référence à l'objet du cache d'application pour la fenêtre. +Retourne une référence à l'objet du cache d'application pour la fenêtre. ## Syntaxe @@ -15,7 +15,7 @@ Retourne une référence à l'objet du cache d'application pour la fenêtre. ### Paramètres -- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. +- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. ## Spécification diff --git a/files/fr/web/api/window/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md index b67730e1a7..c30004caf5 100644 --- a/files/fr/web/api/window/beforeunload_event/index.md +++ b/files/fr/web/api/window/beforeunload_event/index.md @@ -73,7 +73,7 @@ Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes [`window.alert()`](/fr/docs/Web/API/Window/alert), [`window.confirm()`](/fr/docs/Web/API/Window/confirm) et [`window.prompt()`](/fr/docs/Web/API/Window/prompt) peuvent être ignorés durant l'évènement. Voir [la spécification HTML5 (en anglais)](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts) pour plus de détails. -Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé. +Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé. ## Spécifications diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md index 7091fd2664..fcf6d330f7 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.md +++ b/files/fr/web/api/window/cancelanimationframe/index.md @@ -11,7 +11,7 @@ tags: - Window translation_of: Web/API/Window/cancelAnimationFrame --- -{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. +{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md index 126c343b54..e3cfad291c 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.md +++ b/files/fr/web/api/window/cancelidlecallback/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/cancelIdleCallback --- {{APIRef}}{{SeeCompatTable}} -La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. +La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md index 453c55bedb..50f4905ff4 100644 --- a/files/fr/web/api/window/clearimmediate/index.md +++ b/files/fr/web/api/window/clearimmediate/index.md @@ -24,12 +24,12 @@ où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}. ```js let immediateID = setImmediate(() => { - // Exécute du code + // Exécute du code } document.getElementById("bouton") .addEventListener(() => { - clearImmediate(immediateID); + clearImmediate(immediateID); }); ``` diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md index ee82f5b027..f99c4734fc 100644 --- a/files/fr/web/api/window/close/index.md +++ b/files/fr/web/api/window/close/index.md @@ -19,7 +19,7 @@ Ferme la fenêtre référencée. Lorsque cette méthode est appelée, la fenêtre référencée est fermée. -Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` +Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` #### Exemples diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md index 02f4358698..92867fa845 100644 --- a/files/fr/web/api/window/closed/index.md +++ b/files/fr/web/api/window/closed/index.md @@ -20,12 +20,12 @@ Cette propriété est en lecture seule. ### Valeur renvoyée - `isClosed` - - : Un booléen. Les valeurs possibles sont : + - : Un booléen. Les valeurs possibles sont : <!----> -- `false` : La fenêtre est ouverte. -- `true` : La fenêtre a été fermée. +- `false` : La fenêtre est ouverte. +- `true` : La fenêtre a été fermée. ### Exemples @@ -46,7 +46,7 @@ Dans cette exemple, la fonction `refreshPopupWindow()` appelle une fonction dans var popupWindow = null; function refreshPopupWindow() { - if (popupWindow && !popupWindow.closed) { + if (popupWindow && !popupWindow.closed) { // Le popup a déjà été ouvert et il l'est encore. // On peut donc appeler sa fonction doRefresh(). popupWindow.doRefresh(); diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md index ba204b503d..5a51a25ead 100644 --- a/files/fr/web/api/window/confirm/index.md +++ b/files/fr/web/api/window/confirm/index.md @@ -27,7 +27,7 @@ Affiche un dialogue modal avec un message et deux boutons, OK et Annuler. ### Notes -Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md index 3478ea9292..32fa0284b1 100644 --- a/files/fr/web/api/window/console/index.md +++ b/files/fr/web/api/window/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Window/console --- {{ APIRef }} -La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs. +La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs. ## Syntaxe diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md index d40f4f7090..5249432c2a 100644 --- a/files/fr/web/api/window/content/index.md +++ b/files/fr/web/api/window/content/index.md @@ -21,7 +21,7 @@ Certains exemples utilisent `_content` à la place de `content`. Cette forme est ### Exemple -L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : +L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md index fdc4cc14b6..3ca84a2f88 100644 --- a/files/fr/web/api/window/devicepixelratio/index.md +++ b/files/fr/web/api/window/devicepixelratio/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/devicePixelRatio --- {{APIRef}} -La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). +La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes). @@ -26,4 +26,4 @@ Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemp ## Voir aussi - [CSS `resolution` media query](/en-US/docs/Web/CSS/@media/resolution) -- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) +- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md index 4cc63d6a57..add5e2c9e4 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.md +++ b/files/fr/web/api/window/domcontentloaded_event/index.md @@ -29,7 +29,7 @@ L’évènement **`DOMContentLoaded`** est émis lorsque le document HTML initia </tbody> </table> -La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}. +La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}. L'évènement [`load`](/fr/docs/Web/API/Window/load_event), très différent, doit être utilisé uniquement pour détecter qu'une page est entièrement chargée. C'est une erreur répandue d'utiliser [`load`](/fr/docs/Web/API/Window/load_event) là où `DOMContentLoaded` serait beaucoup plus approprié. @@ -39,7 +39,7 @@ L'évènement [`load`](/fr/docs/Web/API/Window/load_event), très différent, do ## Accélérer -Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal. +Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal. ## Exemples @@ -63,5 +63,5 @@ window.addEventListener("DOMContentLoaded", (event) => { ## Voir aussi -- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} -- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} +- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} +- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md index 708c13bd59..3b07247225 100644 --- a/files/fr/web/api/window/focus/index.md +++ b/files/fr/web/api/window/focus/index.md @@ -21,4 +21,4 @@ Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonct | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md index d9e60bcb8c..538f0b2bbd 100644 --- a/files/fr/web/api/window/frames/index.md +++ b/files/fr/web/api/window/frames/index.md @@ -21,9 +21,9 @@ Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, lis frameList = window.frames; -- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. +- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. - `frameList === window` est évalué à `true`. -- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). +- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). - pour plus de détails sur la valeur retournée, se référer au [fil de discussion sur mozilla.dev.platform](http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1). ## Exemple diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md index e46e50b9ec..549e41ee63 100644 --- a/files/fr/web/api/window/fullscreen/index.md +++ b/files/fr/web/api/window/fullscreen/index.md @@ -17,17 +17,17 @@ Cette propriété indique si la fenêtre est affichée en mode plein écran ou n var isInFullScreen = windowRef.fullScreen; -Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner. +Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner. ### Valeur de retour - `isInFullScreen` - - : Une valeur booléenne. Signification des valeurs : + - : Une valeur booléenne. Signification des valeurs : <!----> -- `true` : La fenêtre est en mode plein écran. -- `false` : La fenêtre n'est pas en mode plein écran. +- `true` : La fenêtre est en mode plein écran. +- `false` : La fenêtre n'est pas en mode plein écran. ### Exemples diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md index 37eb7a2905..a5651758b5 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.md +++ b/files/fr/web/api/window/getcomputedstyle/index.md @@ -28,7 +28,7 @@ La valeur de retour `style` est un objet [`CSSStyleDeclaration`](/en/DOM/CSSStyl var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); -// Ce qui équivaut à : +// Ce qui équivaut à : // var style = document.defaultView.getComputedStyle(elem1, null); ``` diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md index 6b2f7b3796..92e5e6437e 100644 --- a/files/fr/web/api/window/getselection/index.md +++ b/files/fr/web/api/window/getselection/index.md @@ -26,7 +26,7 @@ Renvoie un objet selection représentant le ou les objets sélectionnés. ## Notes -En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian +En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian ## Spécification diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md index d89aba868c..509555b9a0 100644 --- a/files/fr/web/api/window/history/index.md +++ b/files/fr/web/api/window/history/index.md @@ -5,10 +5,10 @@ translation_of: Web/API/Window/history --- {{APIRef}} -La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée). +La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée). -L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. -En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. +L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. +En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. ## Exemple @@ -19,11 +19,11 @@ history.go(-1); // similaire à history.back(); ## Notes -Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. +Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. -Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. +Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. -Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. +Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. ## Spécification diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md index 0b4b4b6f98..837e91b6ce 100644 --- a/files/fr/web/api/window/index.md +++ b/files/fr/web/api/window/index.md @@ -35,7 +35,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}} - : Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours. - {{domxref("Window.customElements")}}{{ReadOnlyInline}} - - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. + - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. - {{domxref("Window.crypto")}} {{readOnlyInline}} - : Retourne l'objet crypto du navigateur. - {{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}} @@ -48,19 +48,19 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Synonyme de {{domxref("window.personalbar")}} - {{domxref("Window.document")}} {{ReadOnlyInline}} - : Renvoie une référence au document que la fenêtre contient. -- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. +- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés. -- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} - - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. -- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} + - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. +- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle. - {{domxref("Window.frameElement")}} {{readOnlyInline}} - : Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée. @@ -74,9 +74,9 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.history")}} {{ReadOnlyInline}} - : Retourne une référence à l'objet d'historique. - {{domxref("Window.innerHeight")}} {{readOnlyInline}} - - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. + - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. - {{domxref("Window.innerWidth")}} {{readOnlyInline}} - - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. + - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. - {{domxref("Window.isSecureContext")}} {{readOnlyInline}} - : Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés. - {{domxref("Window.length")}} {{readOnlyInline}} @@ -90,11 +90,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.menubar")}} {{ReadOnlyInline}} - : Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}} - - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. + - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. - {{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}} - - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. + - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. - {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. + - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - : Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} @@ -103,7 +103,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Récupère / définit le nom de la fenêtre. - {{domxref("Window.navigator")}} {{readOnlyInline}} - : Renvoie une référence à l'objet navigateur. -- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. - {{domxref("Window.opener")}} - : Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours. @@ -122,7 +122,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.parent")}} {{readOnlyInline}} - : Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours. - {{domxref("Window.performance")}} {{readOnlyInline}} - - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. + - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. - {{domxref("Window.personalbar")}} {{readOnlyInline}} - : Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.pkcs11")}} {{obsolete_inline(29)}} @@ -138,11 +138,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.scrollbars")}} {{readOnlyInline}} - : Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre. - {{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. + - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. - {{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). + - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). - {{domxref("Window.scrollX")}} {{readOnlyInline}} - - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. + - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. - {{domxref("Window.scrollY")}} {{readOnlyInline}} - : Renvoie le nombre de pixels dont le document a déjà été décalé verticalement. - {{domxref("Window.self")}} {{ReadOnlyInline}} @@ -168,14 +168,14 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - `window[0]`, `window[1]`, etc. - : Renvoie une référence à l'objet `window` dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails. -### Propriétés implémentées depuis ailleurs +### Propriétés implémentées depuis ailleurs - {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}} - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes. - {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}} - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}. - {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}} - - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). + - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). - {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}} - : Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.) @@ -188,15 +188,15 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Recule d'une page dans l'historique de la fenêtre. - {{domxref("Window.blur()")}} - - : Déplace la focalisation hors de la fenêtre. -- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} + - : Déplace la focalisation hors de la fenêtre. +- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}. -- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} +- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}. - {{domxref("Window.captureEvents()")}} {{Deprecated_inline}} - - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. + - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. - {{domxref("Window.clearImmediate()")}} - - : Annule l'exécution répétée définie en utilisant `setImmediate`. + - : Annule l'exécution répétée définie en utilisant `setImmediate`. - {{domxref("Window.close()")}} - : Ferme la fenêtre en cours. - {{domxref("Window.confirm()")}} @@ -210,9 +210,9 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}} - : {{todo("NeedsContents")}} - {{domxref("Window.find()")}} - - : Recherche la chaîne de caractères donnée dans une fenêtre. + - : Recherche la chaîne de caractères donnée dans une fenêtre. - {{domxref("Window.focus()")}} - - : Donne la focalisation à la fenêtre en cours. + - : Donne la focalisation à la fenêtre en cours. - {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Avance la fenêtre d'un document dans l'historique. - {{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -220,13 +220,13 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.getAttentionWithCycleCount()")}} - : {{todo("NeedsContents")}} - {{domxref("Window.getComputedStyle()")}} - - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément. -- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} + - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément. +- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} - : Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur. - {{domxref("Window.getSelection()")}} - - : Renvoie l'objet de sélection représentant les éléments sélectionnés. + - : Renvoie l'objet de sélection représentant les éléments sélectionnés. - {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}} - - : Renvoie le navigateur à la page d'accueil. + - : Renvoie le navigateur à la page d'accueil. - {{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}} - : Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée. - {{domxref("Window.maximize()")}} @@ -234,7 +234,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.minimize()")}} (top-level XUL windows only) - : Minimize la fenêtre. - {{domxref("Window.moveBy()")}} - - : Déplace la fenêtre en cours de la quantité indiquée. + - : Déplace la fenêtre en cours de la quantité indiquée. - {{domxref("Window.moveTo()")}} - : Déplace la fenêtre vers les coordonnées spécifiées. - {{domxref("Window.open()")}} @@ -251,10 +251,10 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - : Annule la capture des évènements d'un certain type par la fenêtre. - {{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}} - : Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante. -- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} - - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. +- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} + - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. - {{domxref("Window.resizeBy()")}} - - : Redimensionne la fenêtre en cours d'une certaine quantité. + - : Redimensionne la fenêtre en cours d'une certaine quantité. - {{domxref("Window.resizeTo()")}} - : Redimensionne dynamiquement la fenêtre. - {{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -280,7 +280,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}} - : Dimensionne la fenêtre en fonction de son contenu. - {{domxref("Window.stop()")}} - - : Cette méthode arrête le chargement de la fenêtre. + - : Cette méthode arrête le chargement de la fenêtre. - {{domxref("Window.updateCommands()")}} {{Non-standard_inline}} - : Met à jour l'état des commandes de la fenêtre chrome en cours (IU). @@ -318,13 +318,13 @@ Ce sont des propriétés de l'objet window qui peuvent être définies pour éta _Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}._ -> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. +> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. - {{domxref("GlobalEventHandlers.onabort")}} - - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. + - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. <!----> @@ -350,12 +350,12 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr <!----> - {{domxref("GlobalEventHandlers.onclick")}} - - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. + - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. <!----> - {domxref("GlobalEventHandlers.ondblclick")}} - - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. + - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. - {{domxref("GlobalEventHandlers.onclose")}} - : Appelé après la fermeture de la fenêtre. @@ -372,7 +372,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - : Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles). - {{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}} - : Appelé lorsque l'orientation est modifiée (pour les appareils mobiles). -- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only +- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only - : Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil. - {{domxref("Window.ondeviceproximity")}} - : Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil. @@ -394,7 +394,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - {{domxref("Window.onappinstalled")}} - : Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}. - {{domxref("Window.ongamepadconnected")}} - - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). + - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). - {{domxref("Window.ongamepaddisconnected")}} - : Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche). - {{domxref("Window.oninput")}} @@ -522,10 +522,10 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr ## Constructeurs -Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). +Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("DOMParser")}} - - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). + - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). - {{domxref("Window.GeckoActiveXObject")}} - : {{todo("NeedsContents")}} - {{domxref("Image")}} @@ -537,7 +537,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("Window.XMLSerializer")}} - : {{todo("NeedsContents")}} - {{domxref("Worker")}} - - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) + - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) - {{domxref("Window.XPCNativeWrapper")}} - : {{todo("NeedsContents")}} - {{domxref("Window.XPCSafeJSObjectWrapper")}} @@ -545,7 +545,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). ## Interfaces -Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) +Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) ## Voir aussi diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md index dba8764f03..55a047fd8c 100644 --- a/files/fr/web/api/window/innerheight/index.md +++ b/files/fr/web/api/window/innerheight/index.md @@ -22,12 +22,12 @@ Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigat ### Valeur -Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. +Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. ## Notes -- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. -- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée. +- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. +- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée. ## Exemples @@ -49,11 +49,11 @@ var intOuterFramesetHeight = top.innerHeight; {{todo("ajouter ici un lien vers une démo interactive")}} - Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. -- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. +- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. ### Exemple graphique -L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`. +L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md index 882ae4d79e..47c2e50a05 100644 --- a/files/fr/web/api/window/innerwidth/index.md +++ b/files/fr/web/api/window/innerwidth/index.md @@ -14,7 +14,7 @@ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtr var largeur = window.innerWidth; -Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). +Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). ## Valeur renvoyée @@ -23,7 +23,7 @@ Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window ## Notes -La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. +La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. ## Example diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md index 31f70f5c81..c9efe7f9c0 100644 --- a/files/fr/web/api/window/length/index.md +++ b/files/fr/web/api/window/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/length --- {{ ApiRef() }} -Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. +Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. ## Syntaxe diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md index 081d5b2c86..3b3c572a50 100644 --- a/files/fr/web/api/window/location/index.md +++ b/files/fr/web/api/window/location/index.md @@ -8,7 +8,7 @@ browser-compat: api.Window.location La propriété en lecture seule **`Window.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location) qui contient des informations à propos de l'emplacement courant du document. -Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. +Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. Voir la page de l'interface [`Location`](/fr/docs/Web/API/Location) pour connaître l'ensemble des propriétés disponibles. @@ -140,7 +140,7 @@ La même chose mais avec un défilement animé : ```js var showBookmark = (function () { - var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, /* * nDuration: la durée, exprimée en millisecondes, pour chaque frame * nFrames: le nombre de frames pour chaque défilement @@ -188,7 +188,7 @@ var showBookmark = (function () { ## Voir aussi -- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). -- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). +- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). +- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). - [Manipuler l'historique du navigateur avec l'API History](/fr/docs/Web/API/History_API) - [`hashchange`](/fr/docs/Web/API/Window/hashchange_event) diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md index 73ab042772..690c42391e 100644 --- a/files/fr/web/api/window/name/index.md +++ b/files/fr/web/api/window/name/index.md @@ -31,11 +31,11 @@ window.name = "lab_view"; Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées. -Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. +Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. ## Spécifications | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md index 98bd7cc28f..19312bd827 100644 --- a/files/fr/web/api/window/offline_event/index.md +++ b/files/fr/web/api/window/offline_event/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/offline_event --- {{APIRef}} -L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. +L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. <table class="properties"> <tbody> diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md index d0be3ff011..1255f9a281 100644 --- a/files/fr/web/api/window/open/index.md +++ b/files/fr/web/api/window/open/index.md @@ -21,7 +21,7 @@ var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeature ### Valeur renvoyée et paramètres - `WindowObjectReference` - - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). + - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). - `strUrl` - : Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. _strUrl_ peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur. - `strWindowName` @@ -110,7 +110,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - toolbar - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant `dom.disable_window_open_feature.toolbar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - location - - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }} + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }} - directories - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant`dom.disable_window_open_feature.directories` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - personalbar @@ -139,11 +139,11 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - dependent - : Si définie à _yes_, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode `showModelessDialog()`. - modal - - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`. + - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`. - dialog - : La fonctionnalité `dialog` retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de*sheets*. - minimizable - - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée. + - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée. - fullscreen - : Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. `fullscreen` ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec `fullscreen` est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. `fullscreen` ne fonctionne plus vraiment dans Internet Explorer 6 SP2. @@ -152,7 +152,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite`, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le [PrivilegeManager](fr/PrivilegeManager). - chrome - - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon). + - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon). - titlebar - : Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à _no_, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant`dom.disable_window_open_feature.titlebar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - alwaysRaised @@ -164,9 +164,9 @@ Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite - close - : Lorsque défini à _no_, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité `dialog` activée). `close=no` a précédence sur `minimizable=yes`.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant `dom.disable_window_open_feature.close` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). -Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. +Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. -Exemple : +Exemple : ```html <script type="text/javascript"> @@ -214,15 +214,15 @@ function openFFPromotionPopup() { l'adoption de Firefox</a></p> ``` -Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». +Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». -Plus d'informations sur l'utilisation de l'attribut target : +Plus d'informations sur l'utilisation de l'attribut target : [HTML 4.01, section 16.3.2 La sémantique de cible](http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2) [Comment créer un lien qui ouvre une nouvelle fenêtre?](http://www.htmlhelp.com/fr/faq/html/links.html#new-window) -Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web : +Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web : ```html <script type="text/javascript"> @@ -243,7 +243,7 @@ function openRequestedPopup(strUrl, strWindowName) { <p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p> ``` -Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : +Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : ```html <script type="text/javascript"> @@ -258,7 +258,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); } - else if(previousUrl != strUrl) + else if(previousUrl != strUrl) { WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); @@ -272,7 +272,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference.focus(); }; PreviousUrl = strUrl; - /* explication : on stocke l'URL courante afin de pouvoir la comparer + /* explication : on stocke l'URL courante afin de pouvoir la comparer dans le cas d'un autre appel à cette fonction. */ } </script> @@ -292,36 +292,36 @@ de Firefox</a></p> ### FAQ -- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? - - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) -- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? +- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? + - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) +- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? - : Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode [focus()](fr/DOM/window.focus). Il n'y a pas d'autre manière fiable. Un [exemple montrant comment utiliser la méthode focus()](#Bonnes_pratiques) est présenté ci-dessus. -- Comment forcer une fenêtre à être agrandie/maximisée ? +- Comment forcer une fenêtre à être agrandie/maximisée ? - : Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter. -- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? +- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? - : Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans `about:config`. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à `yes` pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs. -- Comment redimensionner une fenêtre en fonction de son contenu ? +- Comment redimensionner une fenêtre en fonction de son contenu ? - : Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case `Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes` dans Mozilla ou `Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes` dans Firefox, ou en positionnant `dom.disable_window_move_resize` à _true_ dans <kbd>about:config</kbd> ou encore en éditant leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects. La méthode [sizeToContent()](fr/DOM/window.sizeToContent) de l'objet window est également désactivée si l'utilisateur décoche la préférence `Déplacer ou redimensionner des fenêtres existantes`. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai. -- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? +- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? - : Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. [K-meleon 1.1](http://kmeleon.sourceforge.net/), un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la [propriété target du module CSS3 hyperlien](http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0) pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur. -- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? +- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? - : Vous pouvez tester l'existence de la référence à l'objet `window`, qui est la valeur renvoyée en cas de succès de l'appel à `window.open()`, et vérifier ensuite que la valeur renvoyée par _WindowObjectReference_.closed est bien _false_. -- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? - - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable. -- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? +- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? + - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable. +- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? - : La valeur renvoyée par la méthode `window.open()` est la propriété [opener](fr/DOM/window.opener). La variable _WindowObjectReference_ lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé `opener` liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture). -- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ? - - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) +- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ? + - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) ### Problèmes d'utilisabilité #### Évitez de recourir à `window.open()` -De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : +De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : - Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets. - Il existe à présent [plusieurs extensions à Mozilla](https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update) (comme Multizilla) et [à Firefox](https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing) (comme [Tabbrowser preferences](https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158)), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à `window.open()` en ouvertures d'onglets, et sur la neutralisation des appels à `window.open()`. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs. @@ -330,20 +330,20 @@ De manière générale, il est préférable d'éviter d'utiliser `window.open()` #### Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations -Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées : +Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées : -##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` +##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` -Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. +Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. -- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé. -- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc. -- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. -- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). -- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. -- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. +- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé. +- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc. +- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. +- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). +- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. +- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. -**Plus d'informations à ce sujet :** +**Plus d'informations à ce sujet :** - [Top Ten Web-Design Mistakes of 2002](http://www.useit.com/alertbox/20021223.html), 6. JavaScript in Links, Jakob Nielsen, Décembre 2002 - [Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/), Jeff Howden, Février 2002 @@ -351,32 +351,32 @@ Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'u ##### N'utilisez jamais `<a href="#" onclick="window.open(...);">` -Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc. +Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc. ##### Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut `title` du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris. -Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). +Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). -> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. » +> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. » > citation de [The Top Ten*New* Mistakes of Web Design](http://www.useit.com/alertbox/990530.html): 2. Opening New Browser Windows, Jakob Nielsen, mai 1999 -Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non). +Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non). **Références** -- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) -- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 +- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) +- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 - [Using Link Titles to Help Users Predict Where They Are Going](http://www.useit.com/alertbox/980111.html), Jakob Nielsen, janvier 1998 ##### Utilisez toujours l'attribut target -Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale. +Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale. ##### N'utilisez pas `target="_blank"` -Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées. +Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées. Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur). @@ -423,11 +423,11 @@ WindowObjectReference = window.open("http://www.wwf.org/", Les positions et dimensions demandées dans la liste _strWindowFeatures_ ne seront pas respectées et **seront corrigées** si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. **Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.** -[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs. +[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs. #### Note sur les barres de défilement -Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web : +Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web : - l'utilisateur a redimensionné la fenêtre - l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox @@ -435,24 +435,24 @@ Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fen - l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud `body` dans les différents navigateurs et versions de ceux-ci - l'utilisateur utilise une feuille de style utilisateur ([userContent.css in Mozilla-based browsers](http://www.mozilla.org/support/firefox/edit#content)) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut) - l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation -- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc. +- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc. - l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier -- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. +- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. - certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation #### Note sur la barre d'état -Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.** +Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.** #### Note sur les problèmes de sécurité liés à la présence de la barre d'état -Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : +Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : -> « Pour les fenêtres ouvertes à l'aide de `window.open()` : -> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » +> « Pour les fenêtres ouvertes à l'aide de `window.open()` : +> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » > citation de [Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) -> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. +> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. > Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...) > **Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.** (...) > Gestion de la barre d'état d'Internet Explorer par les scripts @@ -463,12 +463,12 @@ Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de ` #### Note sur le plein écran (fullscreen) -Dans Internet Explorer 6 pour XP SP2 : +Dans Internet Explorer 6 pour XP SP2 : -- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » -- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. » +- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » +- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. » -_Références :_ +_Références :_ - [Fine-Tune Your Web Site for Windows XP Service Pack 2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) - [Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA) @@ -477,11 +477,11 @@ _Références :_ ### Tutoriels -**en français :** +**en français :** [Créer des pop-up intelligentes](http://openweb.eu.org/articles/popup/) par Fabrice Bonny, OpenWeb -**en anglais :** +**en anglais :** [JavaScript windows (tutorial)](http://www.infimum.dk/HTML/JSwindows.html) par Lasse Reichstein Nielsen diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md index bee987dab6..950654278b 100644 --- a/files/fr/web/api/window/opener/index.md +++ b/files/fr/web/api/window/opener/index.md @@ -19,7 +19,7 @@ Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante. ### Exemple - if window.opener != indexWin { + if window.opener != indexWin { referToTop(window.opener); } diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md index 892db6a5cb..94e6404d2e 100644 --- a/files/fr/web/api/window/outerheight/index.md +++ b/files/fr/web/api/window/outerheight/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/outerHeight --- {{APIRef}} -`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles. +`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles. Cette propriété n'a pas de valeur par défaut. @@ -17,13 +17,13 @@ La valeur retournée correspond à la hauteur extérieure de la fenêtre. ## Notes -Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. +Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}. ### Exemple illustré -La figure suivante montre la différence entre `outerHeight` et `innerHeight`. +La figure suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md index 112cdea1ba..9e72791562 100644 --- a/files/fr/web/api/window/pageshow_event/index.md +++ b/files/fr/web/api/window/pageshow_event/index.md @@ -4,7 +4,7 @@ slug: Web/API/Window/pageshow_event translation_of: Web/API/Window/pageshow_event original_slug: Web/Events/pageshow --- -L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). +L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). ## Informations générales @@ -33,7 +33,7 @@ L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de ## Exemples -L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : +L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : ```js window.addEventListener('pageshow', function(event) { @@ -42,7 +42,7 @@ window.addEventListener('pageshow', function(event) { }); ``` -Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : +Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : ```html <body onload="myonload()" onpageshow="mypageshowcode()"> diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md index 907a645d93..c82013ed40 100644 --- a/files/fr/web/api/window/parent/index.md +++ b/files/fr/web/api/window/parent/index.md @@ -19,7 +19,7 @@ Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre co ### Exemple - if (window.parent != window.top) { + if (window.parent != window.top) { // on se trouve dans une imbrication de cadres } diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md index de1e53ba98..08bad0c219 100644 --- a/files/fr/web/api/window/popstate_event/index.md +++ b/files/fr/web/api/window/popstate_event/index.md @@ -3,11 +3,11 @@ title: popstate slug: Web/API/Window/popstate_event translation_of: Web/API/Window/popstate_event --- -L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. +L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. -Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). +Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). -Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. +Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. ## Informations générales @@ -50,7 +50,7 @@ history.back(); // Logs "location: http://example.com/example.html, state: null history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} ``` -Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. +Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. ## Spécifications diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md index c0df0fa2b6..abe8cc16ea 100644 --- a/files/fr/web/api/window/postmessage/index.md +++ b/files/fr/web/api/window/postmessage/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/postMessage --- {{ ApiRef() }} -La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. +La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un [`MessageEvent`](/fr/docs/Web/API/MessageEvent) à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si `window.postMessage` est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le [`MessageEvent`](/fr/docs/Web/API/MessageEvent) est de type `message`, a une propriété `data` qui est initialisée à la valeur du premier argument passé à `window.postMessage`, une propriété `origin` correspondant à l'origine du document principal de la fenêtre appelant `window.postMessage` au moment où `window.postMessage` a été appelée, et une propriété `source` qui est la fenêtre depuis laquelle `window.postMessage` est appelée (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues). @@ -24,7 +24,7 @@ La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un - `message` - : La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant [l'algorithme de clônage structuré](/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm). Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. \[1] - `targetOrigin` - - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.** + - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.** - `transfer` {{optional_Inline}} - : Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur. @@ -37,7 +37,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { - if (event.origin !== "http://example.org:8080") + if (event.origin !== "http://example.org:8080") return; // ... @@ -86,7 +86,7 @@ function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? (il pourrait être // différent de la fenêtre que nous avons ouverte au départ, par exemple). - if (event.origin !== "http://example.org") + if (event.origin !== "http://example.org") return; // event.source est la popup @@ -104,7 +104,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? - if (event.origin !== "http://example.com:8080") + if (event.origin !== "http://example.com:8080") return; // event.source est window.opener diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md index 075e864e2c..05f84e3b80 100644 --- a/files/fr/web/api/window/requestanimationframe/index.md +++ b/files/fr/web/api/window/requestanimationframe/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/window/requestAnimationFrame --- {{APIRef("Window")}} -La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur. +La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur. > **Note :** Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode `requestAnimationFrame()`. -Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément. +Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément. Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu. @@ -28,11 +28,11 @@ requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions ### Paramètres - `callback` - - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. + - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. ### Valeur retournée -`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback. +`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback. ## Exemple @@ -64,7 +64,7 @@ requestAnimationFrame(step); ### Notes pour Gecko -\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. +\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. \[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. `DOMTimeStamp` n'a qu'une précision de l'ordre de la milliseconde, mais `DOMHightResTimeStamp` a une précision minimale de l'ordre de 10 microsecondes. diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md index f70c6f1c13..3db65ac569 100644 --- a/files/fr/web/api/window/requestidlecallback/index.md +++ b/files/fr/web/api/window/requestidlecallback/index.md @@ -13,18 +13,18 @@ La méthode **`window.requestIdleCallback()`** mémorise une fonction qui sera a ### Retour de l'appel -Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. +Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. ### Paramètres - fonction - - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : + - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : - `timeRemaining` : fonction qui retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. `timeRemaining()` retournera toujours zéro si `didTimeout` est positionné à `true` (par exemple, la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue. - `didTimeout` : un booléen positionné à `true` si la fonction est appelée car le timeout a été atteint, et `false` si elle a été appelée par le navigateur durant une période de repos. -- `options` {{optional_inline}} +- `options` {{optional_inline}} - : Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : - `timeout` : si `timeout` est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins `timeout` millisecondes si elle n'a pas été appelée par le navigateur au préalable. diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md index 79bbd5f09f..9582b7799d 100644 --- a/files/fr/web/api/window/screen/index.md +++ b/files/fr/web/api/window/screen/index.md @@ -11,7 +11,7 @@ tags: - Écran translation_of: Web/API/Window/screen --- -{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante. +{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante. ## Syntaxe @@ -31,7 +31,7 @@ if (screen.pixelDepth < 8) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | +| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md index a6c4a13e38..aeea7a1763 100644 --- a/files/fr/web/api/window/screenx/index.md +++ b/files/fr/web/api/window/screenx/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Window/screenX --- {{APIRef}} -La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. +La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. ## Syntax diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md index 8b76b7d25c..a0321124f7 100644 --- a/files/fr/web/api/window/scrollby/index.md +++ b/files/fr/web/api/window/scrollby/index.md @@ -18,10 +18,10 @@ Fait défiler le document dans la fenêtre du nombre de pixels passé en paramè ### Paramètres -- `X` est le nombre en pixels pour le défilement horizontal. -- `Y` est le nombre en pixels pour le défilement vertical. +- `X` est le nombre en pixels pour le défilement horizontal. +- `Y` est le nombre en pixels pour le défilement vertical. -Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. +Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. ## Exemples @@ -30,7 +30,7 @@ Des coordonnées positives feront défiler à droite et vers le bas de la page. ## Notes -[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) +[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) ## Spécification diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md index 947dccb77e..298b258494 100644 --- a/files/fr/web/api/window/scrollbypages/index.md +++ b/files/fr/web/api/window/scrollbypages/index.md @@ -31,7 +31,7 @@ Fait défiler le document du nombre de pages spécifié. ### Notes -Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). +Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). ### Spécification diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md index 7bb0be2506..68f79a5e4f 100644 --- a/files/fr/web/api/window/scrolly/index.md +++ b/files/fr/web/api/window/scrolly/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/scrollY --- {{APIRef}} -La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier. +La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier. ## Syntaxe diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md index add3c42855..b3e5223171 100644 --- a/files/fr/web/api/window/showmodaldialog/index.md +++ b/files/fr/web/api/window/showmodaldialog/index.md @@ -25,18 +25,18 @@ où - `retour` est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par `uri`. - `uri` est l'URI du document à afficher dans la boîte de dialogue. -- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). -- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : +- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). +- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : | Syntaxe | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | -| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | +| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogleft:left` | Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogtop:top` | Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. | -| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`. | +| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. | +| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`. | {{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }} @@ -52,4 +52,4 @@ Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Fir ### Spécification -Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) +Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md index 18ba0331c9..f768a84b19 100644 --- a/files/fr/web/api/window/unload_event/index.md +++ b/files/fr/web/api/window/unload_event/index.md @@ -7,21 +7,21 @@ tags: translation_of: Web/API/Window/unload_event original_slug: Web/Events/unload --- -L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. +L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. Il est lancé après : 1. [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable) 2. [pagehide](/en-US/docs/Mozilla_event_reference/pagehide) -Le document se trouve alors dans un état particulier : +Le document se trouve alors dans un état particulier : - Toutes les ressources existent encore (img, iframe etc.) - Plus rien n'est encore visible par l'utilisateur final - Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.) - Aucune erreur ne viendra interrompre le flux de déchargement. -Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). +Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). <table class="properties"> <tbody> @@ -59,7 +59,7 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre | `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | Le type d'événement. | | `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement remonte ou non. | | `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement est annulable ou non. | -| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | | `detail` {{readonlyInline}} | `long` (`float`) | 0. | ## Exemple @@ -84,29 +84,29 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre </html> ``` -Ci-dessous, le contenu de `child-frame.html`: +Ci-dessous, le contenu de `child-frame.html`: ```html <!DOCTYPE html> <html> <head> <title>Cadre enfant</title> - <script> - window.addEventListener('beforeunload', function(event) { - console.log('Je suis le 2nd.'); - }); + <script> + window.addEventListener('beforeunload', function(event) { + console.log('Je suis le 2nd.'); + }); window.addEventListener('unload', function(event) { console.log('Je suis le 4ème et dernier…'); }); </script> </head> <body> - ☻ + ☻ </body> </html> ``` -Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. +Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. ## Événements liés diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md index 815a35a5d5..8fcfff0066 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplayconnect` dans une méthode [`addEve ```js window.addEventListener('vrdisplayconnect', function() { - info.textContent = 'Affichage connecté.'; - reportDisplays(); + info.textContent = 'Affichage connecté.'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md index 3e84875409..6578664ce0 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplaydisconnect` dans une méthode [`add ```js window.addEventListener('vrdisplaydisconnect', function() { - info.textContent = 'Affichage déconnecté'; - reportDisplays(); + info.textContent = 'Affichage déconnecté'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/windowclient/focus/index.md b/files/fr/web/api/windowclient/focus/index.md index 4c1a00417c..4d61feab28 100644 --- a/files/fr/web/api/windowclient/focus/index.md +++ b/files/fr/web/api/windowclient/focus/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/focus --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Syntaxe @@ -28,7 +28,7 @@ Nil. ### Valeur de retour -Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Exemple diff --git a/files/fr/web/api/windowclient/focused/index.md b/files/fr/web/api/windowclient/focused/index.md index a6b34590e2..e8797d01d0 100644 --- a/files/fr/web/api/windowclient/focused/index.md +++ b/files/fr/web/api/windowclient/focused/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/focused --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . +La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . ## Syntax diff --git a/files/fr/web/api/windowclient/index.md b/files/fr/web/api/windowclient/index.md index 3fbcd1fde0..b91fb1fb80 100644 --- a/files/fr/web/api/windowclient/index.md +++ b/files/fr/web/api/windowclient/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. +L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. ## Méthodes @@ -32,7 +32,7 @@ _`WindowClient` hérite certaines propriétés de son parent, {{domxref("Client" - {{domxref("WindowClient.focused")}} {{readonlyInline}} - : Un booléen qui indique si oui ou non le client en cours est focus. - {{domxref("WindowClient.visibilityState")}} {{readonlyInline}} - - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. + - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. ## Exemple diff --git a/files/fr/web/api/windowclient/navigate/index.md b/files/fr/web/api/windowclient/navigate/index.md index 85041b1392..c75a684e61 100644 --- a/files/fr/web/api/windowclient/navigate/index.md +++ b/files/fr/web/api/windowclient/navigate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/navigate --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une {{jsxref("Promise")}} qui devra être analysée par {{domxref("WindowClient")}} (le demandeur). +La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une {{jsxref("Promise")}} qui devra être analysée par {{domxref("WindowClient")}} (le demandeur). ## Syntaxe @@ -29,7 +29,7 @@ La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge ### Retour -Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . +Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . ## Spécifications diff --git a/files/fr/web/api/windowclient/visibilitystate/index.md b/files/fr/web/api/windowclient/visibilitystate/index.md index 3589b09443..785a1c8ef3 100644 --- a/files/fr/web/api/windowclient/visibilitystate/index.md +++ b/files/fr/web/api/windowclient/visibilitystate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/visibilityState --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. +La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. ## Syntaxe @@ -15,7 +15,7 @@ myVisState = WindowClient.visibilityState; ### Value -une {{domxref("DOMString")}}. +une {{domxref("DOMString")}}. ## Example diff --git a/files/fr/web/api/windoweventhandlers/index.md b/files/fr/web/api/windoweventhandlers/index.md index 16b52003b1..e813dad962 100644 --- a/files/fr/web/api/windoweventhandlers/index.md +++ b/files/fr/web/api/windoweventhandlers/index.md @@ -20,7 +20,7 @@ _Les propriétés d'événement, de la forme `onXYZ`, sont définis sur {{domxre - {{domxref("WindowEventHandlers.onbeforeunload")}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché. - {{domxref("WindowEventHandlers.onhashchange")}} - - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. + - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. - {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché. - {{domxref("WindowEventHandlers.onmessage")}} diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.md b/files/fr/web/api/windoweventhandlers/onafterprint/index.md index 2eff2b9b01..00693361e8 100644 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.md @@ -36,7 +36,7 @@ Safari ne reconnaît pas ces événements. | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md index 1df25a3c86..f62378ae29 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md @@ -37,7 +37,7 @@ mediaQueryList.addListener(function(mql) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.md b/files/fr/web/api/windoweventhandlers/onhashchange/index.md index 973f3353f8..36725fabc4 100644 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.md +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.md @@ -3,7 +3,7 @@ title: WindowEventHandlers.onhashchange slug: Web/API/WindowEventHandlers/onhashchange translation_of: Web/API/WindowEventHandlers/onhashchange --- -{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). +{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). ## Syntaxe @@ -38,9 +38,9 @@ function locationHashChanged() { window.onhashchange = locationHashChanged; ``` -## L'événement hashchange +## L'événement hashchange -Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: +Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: <table class="standard-table"> <tbody> @@ -62,7 +62,7 @@ Lorsque l'observateur d'événement déclenche l'événement hashchange il pass </tbody> </table> -### Une solution autour de event.newURL et event.oldURL +### Une solution autour de event.newURL et event.oldURL ```js //insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL @@ -76,15 +76,15 @@ if(!window.HashChangeEvent)(function(){ }()); ``` -### +### -## Spécifications +## Spécifications | Spécifications | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | -| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs @@ -93,5 +93,5 @@ if(!window.HashChangeEvent)(function(){ ## Voir aussi - [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur) -- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) -- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) +- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) +- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.md b/files/fr/web/api/windoweventhandlers/onpopstate/index.md index e9d7b97a63..4487baffd2 100644 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.md +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/WindowEventHandlers/onpopstate Un gestionnaire d'évènement pour l'évènement `popstate` de la fenêtre. -L'évènement `popstate` est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. +L'évènement `popstate` est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. -Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. +Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. ### Syntaxe window.onpopstate = funcRef; -- `funcRef` est une référence à une fonction. +- `funcRef` est une référence à une fonction. ### L'évènement popstate -Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: +Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: ```js window.onpopstate = function(event) { @@ -37,7 +37,7 @@ history.back(); // affiche "adresse: http://example.com/example.html, état: nul history.go(2); // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3} ``` -Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. +Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. ### Spécification diff --git a/files/fr/web/api/worker/onmessage/index.md b/files/fr/web/api/worker/onmessage/index.md index 5e3e925e37..98c6720c15 100644 --- a/files/fr/web/api/worker/onmessage/index.md +++ b/files/fr/web/api/worker/onmessage/index.md @@ -32,8 +32,8 @@ first.onchange = function() { } myWorker.onmessage = function(e) { - result.textContent = e.data; - console.log('Message reçu du worker'); + result.textContent = e.data; + console.log('Message reçu du worker'); } ``` diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md index 19af80e667..7547415b2c 100644 --- a/files/fr/web/api/worker/postmessage/index.md +++ b/files/fr/web/api/worker/postmessage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Worker/postMessage --- {{ apiref("Worker") }} -La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. +La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. @@ -45,7 +45,7 @@ second.onchange = function() { } ``` -Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). +Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). > **Note :** `postMessage()` peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau. diff --git a/files/fr/web/api/workerglobalscope/console/index.md b/files/fr/web/api/workerglobalscope/console/index.md index 7639bfe044..647aebc499 100644 --- a/files/fr/web/api/workerglobalscope/console/index.md +++ b/files/fr/web/api/workerglobalscope/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WorkerGlobalScope/console --- {{APIRef("Web Workers API")}}{{Non-standard_header}} -La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. +La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. ## Syntaxe @@ -32,13 +32,13 @@ Cette propriété vous permet d'avoir accès à la console du navigateur à des console.log('test'); ``` -dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. +dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. -Si vous appelez `console.log()` depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. +Si vous appelez `console.log()` depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. ## Spécifications -Ne fait pas encore parti d'une spécification. +Ne fait pas encore parti d'une spécification. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/workerglobalscope/dump/index.md b/files/fr/web/api/workerglobalscope/dump/index.md index d2086da3d8..c3bc8dd3a0 100644 --- a/files/fr/web/api/workerglobalscope/dump/index.md +++ b/files/fr/web/api/workerglobalscope/dump/index.md @@ -25,7 +25,7 @@ Rien. ## Exemple -Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): +Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): ```bash ./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.md b/files/fr/web/api/workerglobalscope/importscripts/index.md index 409e24cafe..f76d6ef889 100644 --- a/files/fr/web/api/workerglobalscope/importscripts/index.md +++ b/files/fr/web/api/workerglobalscope/importscripts/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts --- {{APIRef("Web Workers API")}} -La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. +La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. ## Syntaxe diff --git a/files/fr/web/api/workerglobalscope/index.md b/files/fr/web/api/workerglobalscope/index.md index a0c26cd26e..7abb31dce3 100644 --- a/files/fr/web/api/workerglobalscope/index.md +++ b/files/fr/web/api/workerglobalscope/index.md @@ -25,7 +25,7 @@ _Cette interface hérite des propriétés de l'interface {{domxref("EventTarget" - {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers. - {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}} - - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. + - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. - {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers. diff --git a/files/fr/web/api/workerglobalscope/location/index.md b/files/fr/web/api/workerglobalscope/location/index.md index c21bab74f5..454c77289c 100644 --- a/files/fr/web/api/workerglobalscope/location/index.md +++ b/files/fr/web/api/workerglobalscope/location/index.md @@ -25,20 +25,20 @@ Si vous appelez l'instruction suivante dans un document délivré par `localhost console.log(location); ``` -à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : +à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : ```js WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} - hash: "" - host: "localhost:8000" - hostname: "localhost" - href: "http://localhost:8000/worker.js" - origin: "http://localhost:8000" - pathname: "/worker.js" - port: "8000" - protocol: "http:" - search: "" - __proto__: WorkerLocation + hash: "" + host: "localhost:8000" + hostname: "localhost" + href: "http://localhost:8000/worker.js" + origin: "http://localhost:8000" + pathname: "/worker.js" + port: "8000" + protocol: "http:" + search: "" + __proto__: WorkerLocation ``` Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal. diff --git a/files/fr/web/api/workerglobalscope/navigator/index.md b/files/fr/web/api/workerglobalscope/navigator/index.md index f9895b1185..68cdfef74d 100644 --- a/files/fr/web/api/workerglobalscope/navigator/index.md +++ b/files/fr/web/api/workerglobalscope/navigator/index.md @@ -15,7 +15,7 @@ var navigatorObj = self.navigator; ### Valeur de retour -Un objet {{domxref("WorkerNavigator")}}. +Un objet {{domxref("WorkerNavigator")}}. ## Exemple diff --git a/files/fr/web/api/workerglobalscope/self/index.md b/files/fr/web/api/workerglobalscope/self/index.md index 48a1670388..e5e1665b14 100644 --- a/files/fr/web/api/workerglobalscope/self/index.md +++ b/files/fr/web/api/workerglobalscope/self/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/self --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. +La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. ## Syntaxe @@ -30,8 +30,8 @@ au sein d'un worker, vous obtiendrez un worker global scope du même type que l' ```js DedicatedWorkerGlobalScope { undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…} - Infinity: Infinity - Array: function Array() { [native code] } + Infinity: Infinity + Array: function Array() { [native code] } arguments: null caller: null isArray: function isArray() { [native code] } @@ -42,7 +42,7 @@ undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: unobserve: function unobserve() { [native code] } __proto__: function Empty() {} <function scope> - ArrayBuffer: function ArrayBuffer() { [native code] } + ArrayBuffer: function ArrayBuffer() { [native code] } Blob: function Blob() { [native code] } Boolean: function Boolean() { [native code] } DataView: function DataView() { [native code] } diff --git a/files/fr/web/api/workerlocation/index.md b/files/fr/web/api/workerlocation/index.md index e6bd9e25cb..be2c1c1926 100644 --- a/files/fr/web/api/workerlocation/index.md +++ b/files/fr/web/api/workerlocation/index.md @@ -8,39 +8,39 @@ translation_of: Web/API/WorkerLocation --- {{APIRef("Web Workers API")}} -L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. +L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. -Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. +Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. ## Propriétés -_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison`':'`. - {{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique. - {{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. + - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. ## Méthodes -_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.toString()")}} - - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. + - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. ## Spécifications @@ -54,5 +54,5 @@ _L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les ## Voir aussi -- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. -- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) +- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. +- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) diff --git a/files/fr/web/api/xmldocument/load/index.md b/files/fr/web/api/xmldocument/load/index.md index e67f1cdece..7125d2192a 100644 --- a/files/fr/web/api/xmldocument/load/index.md +++ b/files/fr/web/api/xmldocument/load/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/XMLDocument/load --- {{APIRef("DOM")}} -`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). +`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). ## Exemples @@ -27,7 +27,7 @@ translation_of: Web/API/XMLDocument/load xmlDoc.addEventListener("load", documentCharge, false); xmlDoc.load('querydata.xml'); -{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.) +{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.) ## Spécification @@ -40,4 +40,4 @@ translation_of: Web/API/XMLDocument/load ## Voir aussi - [document.async](/fr/docs/Web/API/Document/async) -- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) +- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md index ef2a2c8481..bbf78ebcb6 100644 --- a/files/fr/web/api/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -83,7 +83,7 @@ Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRe D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (`onload`, `onerror`, `onprogress`, etc.). Voir le guide [Manipuler XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest). -La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). +La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). ## Méthodes diff --git a/files/fr/web/api/xmlhttprequest/load_event/index.md b/files/fr/web/api/xmlhttprequest/load_event/index.md index 8d314127c3..1b9875fcef 100644 --- a/files/fr/web/api/xmlhttprequest/load_event/index.md +++ b/files/fr/web/api/xmlhttprequest/load_event/index.md @@ -14,7 +14,7 @@ The **`XMLHttpRequestEventTarget.onload`** is the function called when an {{domx ### Values -- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. +- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. ## Example diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md index 0622599286..60f69ba432 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.md +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/open La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante. -> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. +> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. ## Syntaxe @@ -24,9 +24,9 @@ La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête. - `async` {{optional_inline}} - - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée. + - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée. - > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}. + > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}. - `user` {{optional_inline}} - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md index f453f7aa74..5564c8b433 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.md +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -51,11 +51,11 @@ La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve u - UNSENT - : Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée. - OPENED - - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. + - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. - HEADERS_RECEIVED - : send() a été appelé et les en-têtes de réponse ont été reçus - LOADING - - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. + - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. - DONE - : L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué. diff --git a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md index c9cf4293db..7f3216a653 100644 --- a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md +++ b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/XMLHttpRequest/onreadystatechange --- {{APIRef}} -Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée. +Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée. > **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif. @@ -28,8 +28,8 @@ var xhr = new XMLHttpRequest(), xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { - console.log(xhr.responseText); - } + console.log(xhr.responseText); + } }; xhr.send(); ``` diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md index d07b064c06..89ff616f78 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.md +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -107,7 +107,7 @@ translation_of: Web/API/XMLHttpRequest/response </tbody> </table> -> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. +> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. ## Example @@ -115,16 +115,16 @@ translation_of: Web/API/XMLHttpRequest/response var url = 'somePage.html'; // une page locale function load(url, callback) { - var xhr = new XMLHttpRequest(); + var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - console.log(xhr.response); // Par défault une DOMString - } - } + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + console.log(xhr.response); // Par défault une DOMString + } + } xhr.open('GET', url, true); - xhr.send(''); + xhr.send(''); } ``` diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md index 5b78aee1da..183f096c1a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.md +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -13,7 +13,7 @@ La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** re ### Value -A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. +A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. Lors du traitement d'une requête asynchrone, la valeur de `responseText` reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues. diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md index 1261f8a9b3..81d150e4ee 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.md +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/send --- {{APIRef('XMLHttpRequest')}} -La méthode {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée. +La méthode {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée. -`send()` accepte un paramètre optionnel qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`. +`send()` accepte un paramètre optionnel qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`. Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" `Accept` avec le type `"*/*"` (tous types) est envoyé. @@ -39,7 +39,7 @@ Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref(" Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée. -La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. +La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. ### Valeur de retour diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md index 14381808cd..4b5b525ba4 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader --- {{APIRef('XMLHttpRequest')}} -La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. +La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. -A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. +A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. -Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. +Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. -Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. +Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. -> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur. +> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur. ## Syntax diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index ef65aa1245..9c366f23af 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -14,11 +14,11 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- -[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant. +[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant. ```js function reqListener () { - console.log(this.responseText); + console.log(this.responseText); } var oReq = new XMLHttpRequest(); @@ -29,37 +29,37 @@ oReq.send(); ## Types de requêtes -Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. +Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. > **Note :** A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur. ## Gérer les réponses -Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes. +Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes. -### Analyser et manipuler la propriété `responseXML` +### Analyser et manipuler la propriété `responseXML` Si vous utilisez `XMLHttpRequest` pour obtenir le contenu d'un fichier XML distant, la propriété `responseXML` sera un objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatre moyens principaux d'analyser ce document XML : -1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. -2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. -3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. -4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** +1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. +2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. +3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. +4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** 5. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `RegExp` en prenant en compte ces sauts. Toutefois, cette méthode est un « dernier recours », car si le code XML change légèrement, la méthode échouera probablement. -### Analyser et manipuler une propriété `responseText` contenant un document HTML +### Analyser et manipuler une propriété `responseText` contenant un document HTML -> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. +> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. -Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML : +Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML : -1. Utiliser la propriété `XMLHttpRequest.responseXML`. -2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. +1. Utiliser la propriété `XMLHttpRequest.responseXML`. +2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. 3. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `RegExp` en prenant en compte ces sauts. Toutefois, cette méthode est un « dernier recours », car si le code XML change légèrement, la méthode échouera probablement. ## Gérer les données binaires -Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. +Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. ```js var oReq = new XMLHttpRequest(); @@ -69,7 +69,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); /* ... */ ``` -La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. +La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. ```js var oReq = new XMLHttpRequest(); @@ -77,19 +77,19 @@ var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { - var arraybuffer = oReq.response; // n'est pas responseText - /* ... */ + var arraybuffer = oReq.response; // n'est pas responseText + /* ... */ } oReq.send(); ``` -Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) +Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) ## Surveiller la progression -`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. +`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. -Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. +Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. ```js var oReq = new XMLHttpRequest(); @@ -105,12 +105,12 @@ oReq.open(); // progression des transferts depuis le serveur jusqu'au client (téléchargement) function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Impossible de calculer la progression puisque la taille totale est inconnue - } + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Impossible de calculer la progression puisque la taille totale est inconnue + } } function transferComplete(evt) { @@ -126,13 +126,13 @@ function transferCanceled(evt) { } ``` -Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. +Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. -> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. +> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. -Le gestionnaire de progression, spécifié par la fonction `updateProgress()` dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. +Le gestionnaire de progression, spécifié par la fonction `updateProgress()` dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. -Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: +Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: ```js var oReq = new XMLHttpRequest(); @@ -145,15 +145,15 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); ``` -> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. +> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. -> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). +> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). -> **Note :** A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement. +> **Note :** A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement. -> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. +> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. -Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : +Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : ```js req.addEventListener("loadend", loadEnd, false); @@ -163,32 +163,32 @@ function loadEnd(e) { } ``` -Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. +Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. ## Envoyer des formulaires et uploader des fichiers -Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : +Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : - n'utiliser rien de plus qu'AJAX -- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) +- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) -La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). -La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. +La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). +La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. -### Rien de plus que `XMLHttpRequest` +### Rien de plus que `XMLHttpRequest` -Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. +Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. #### Une brève introduction au méthodes de submission Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières : -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; -- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; +- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). -Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : +Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : - Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut): @@ -220,13 +220,13 @@ Maintenant, considérons qu'on envoie un formulaire contenant seulement deux cha -----------------------------314911788813839-- -Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : +Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. #### Un petit framework vanilla -Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: +Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: ```html <!doctype html> @@ -240,140 +240,140 @@ Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTML /*\ |*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() \*/ if (!XMLHttpRequest.prototype.sendAsBinary) { - XMLHttpRequest.prototype.sendAsBinary = function(sData) { - var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; } /*\ |*| -|*| :: AJAX Form Submit Framework :: +|*| :: AJAX Form Submit Framework :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest |*| |*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| -|*| Syntax: +|*| Syntax: |*| -|*| AJAXSubmit(HTMLFormElement); +|*| AJAXSubmit(HTMLFormElement); \*/ var AJAXSubmit = (function () { - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + else { + /* method is POST */ + oAjaxReq.open("post", oData. + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxR + oAjaxR + } else { + /* enctype is application/x-www-form-urlencoded or text/plain + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + else { + /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + else if ((sFieldTyp + /* field type is no + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField + * enctype is application/x-www-form-urlencoded or + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; })(); @@ -386,94 +386,94 @@ var AJAXSubmit = (function () { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> <form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: +Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: ```php <?php @@ -504,15 +504,15 @@ La syntaxe de ce script est la suivante: AJAXSubmit(myForm); -> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. +> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. -> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). +> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). > **Note :** La méthode non-standard `sendAsBinary` est dépréciée à partir de Gecko 31 et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place. ### Utiliser les objets FormData -Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode `submit()` d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : +Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode `submit()` d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : ```html <!doctype html> @@ -524,31 +524,31 @@ Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous p "use strict"; function ajaxSuccess () { - alert(this.responseText); + alert(this.responseText); } function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + else { + var oField, sFieldType, nFile, sSearch = + for (var nItem = 0; nItem < oFormElement + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("na + sFieldType = oField.nodeName + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + esca + } + + + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } } </script> </head> @@ -559,32 +559,32 @@ function AJAXSubmit (oFormElement) { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> @@ -594,51 +594,51 @@ function AJAXSubmit (oFormElement) { <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. +> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. ## Récupérer la date de modification ```js function getHeaderTime () { - alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ + alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ } var oReq = new XMLHttpRequest(); @@ -654,24 +654,24 @@ Créons deux fonctions: ```js function getHeaderTime () { - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + var + nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), + nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } } function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); } ``` @@ -681,15 +681,15 @@ Test: /* Testons le fichier "mapage.html"... */ ifHasChanged("mapage.html", function (nModif, nVisit) { - alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); + alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); }); ``` -Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). +Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). ## Cross-site XMLHttpRequest -Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. +Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. ## Contourner le cache @@ -711,9 +711,9 @@ oReq.send(null); ## Sécurité -{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} +{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} -{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} +{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} La manière recommandée d'activer les requêtes intersites est d'utiliser l'en-tête HTTP `Access-Control-Allow-Origin` dans la réponse du `XMLHttpRequest`. @@ -723,7 +723,7 @@ Si vous vous retrouvez avec une `XMLHttpRequest` ayant `status=0` et `statusText ## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM -Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM. +Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM. ```js const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md index ec22be411b..e7cb522304 100644 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/XMLHttpRequest/withCredentials --- {{APIRef('XMLHttpRequest')}} -La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. +La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. -Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. +Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. Les cookies tiers obtenus lorsque `withCredentials` vaut `true` continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via [`document.cookie`](/fr/docs/Web/API/Document/cookie) ou depuis les en-têtes de la réponse. @@ -34,7 +34,7 @@ xhr.send(null); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | +| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md index 58857af3a9..df589c5b4d 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -35,7 +35,7 @@ Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum ini ## La syntaxe de Firefox non-standard -Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. +Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. const request = new XMLHttpRequest(paramsDictionary); diff --git a/files/fr/web/api/xmlserializer/index.md b/files/fr/web/api/xmlserializer/index.md index 0823351087..58d40e6ce9 100644 --- a/files/fr/web/api/xmlserializer/index.md +++ b/files/fr/web/api/xmlserializer/index.md @@ -28,16 +28,16 @@ original_slug: XMLSerializer var s = new XMLSerializer(); var stream = { - close : function() + close : function() { alert("Flux fermé"); }, - flush : function() + flush : function() { }, - write : function(string, count) + write : function(string, count) { - alert("'" + string + "'\n nb d'octets : " + count + ""); + alert("'" + string + "'\n nb d'octets : " + count + ""); } }; s.serializeToStream(document, stream, "UTF-8"); diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.md b/files/fr/web/api/xsltprocessor/basic_example/index.md index f7de3132b2..d756065dd3 100644 --- a/files/fr/web/api/xsltprocessor/basic_example/index.md +++ b/files/fr/web/api/xsltprocessor/basic_example/index.md @@ -18,9 +18,9 @@ La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xm Une feuille de style XSLT débute par l'élément `xsl:stylesheet`, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds `Author`. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via `apply-templates`) correspondant aux nœuds `Author` qui sont les descendants du nœud `Authors`. -Figure 1 : exemple XSLT simple +Figure 1 : exemple XSLT simple -Document XML (exemple.xml) : +Document XML (exemple.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="exemple.xsl"?> @@ -33,7 +33,7 @@ Document XML (exemple.xml) : <Body>Ceci est le texte de mon article.</Body> </Article> -Feuille de style XSL (exemple.xsl) : +Feuille de style XSL (exemple.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> @@ -42,7 +42,7 @@ Feuille de style XSL (exemple.xsl) : <xsl:template match="/"> Article - <xsl:value-of select="/Article/Title"/> - Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> + Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> </xsl:template> <xsl:template match="Author"> @@ -51,10 +51,10 @@ Feuille de style XSL (exemple.xsl) : </xsl:stylesheet> -Sortie dans le navigateur : +Sortie dans le navigateur : Article - Mon article - Auteurs : + Auteurs : - M. Foo - M. Bar diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md index 535ee31fe5..6b79d2d94e 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.md +++ b/files/fr/web/api/xsltprocessor/generating_html/index.md @@ -16,7 +16,7 @@ Une application courante de XSLT dans les navigateurs est la transformation de c L'élément `<body>` de l'article contient maintenant des éléments HTML (des balises `<strong>` et `<em>`, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud `xsl:output` de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, [`http://devedge.netscape.com/2002/de`](http://devedge.netscape.com/2002/de), à qui nous donnons le préfixe myNS `(xmlns:myNS="http://devedge.netscape.com/2002/de")`. -**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"> +**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"> <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> @@ -34,7 +34,7 @@ L'élément `<body>` de l'article contient maintenant des éléments HTML (des b La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à `HTML` à l'aide de l'élément `xsl:output`. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML. -**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): +**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -47,7 +47,7 @@ La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un po Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML. -**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): +**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): ... <xsl:template match="/"> @@ -71,7 +71,7 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p <xsl:value-of select="/myNS:Article/myNS:Title"/> </span> <br /> - Auteurs : <br /> + Auteurs : <br /> <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> </p> @@ -85,16 +85,16 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p </xsl:template> ... -Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation. +Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation. -**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): +**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): ... <xsl:template match="myNS:Author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> + :: <strong> <xsl:value-of select="@company" /> </strong> </xsl:if> <br /> @@ -113,9 +113,9 @@ Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exe </xsl:template> ... -La feuille de style XSLT finale est donc : +La feuille de style XSLT finale est donc : -**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : +**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -162,7 +162,7 @@ La feuille de style XSLT finale est donc : -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <b> <xsl:value-of select="@company" /> </b> + :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md index 59b57119e7..8006c9c22f 100644 --- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md @@ -6,21 +6,21 @@ tags: translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla --- -#### Pourquoi ma feuille de style ne s'applique pas ? +#### Pourquoi ma feuille de style ne s'applique pas ? Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir `text/xml` ou `application/xml`. L'espace de nommage XSLT est `http://www.w3.org/1999/XSL/Transform`. Utilisez l'instruction de traitement `<?xml-stylesheet ?>` plutôt que l'élément non standard `xml:stylesheet`. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que [LiveHTTPHeaders (en)](http://livehttpheaders.mozdev.org/) ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. -#### Cela fonctione dans IE, mais pas dans Mozilla ? +#### Cela fonctione dans IE, mais pas dans Mozilla ? Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. -#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? +#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter **d-o-e** plutôt que de provoquer des crashes ou de ralentir le processus. -#### Que dire de `document.write` ? +#### Que dire de `document.write` ? -Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : +Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : <xsl:if test="system-property('xsl:vendor')='Transformiix'"> <!-- Balisage propre à Mozilla --> @@ -29,7 +29,7 @@ Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les trans <!-- Balisage propre à IE --> </xsl:if> -Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : +Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> @@ -38,7 +38,7 @@ Vérifiez system-properties.xml pour les propriétés de votre système favori. #### Que dire de `media="print"`? -Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un `media` particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. +Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un `media` particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient `media` comme les pages sans XSLT**.** @@ -46,10 +46,10 @@ Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, Il existe `transformToDocument` et `transformToFragment` depuis Mozilla 1.2, voir [Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL](fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL). -#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? +#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? -Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. +Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. -#### Comment compiler une version autonome de TransforMiiX ? +#### Comment compiler une version autonome de TransforMiiX ? Voir l'article sur [Compilation de TransforMiiX](fr/Compilation_de_TransforMiiX). diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md index 5bb568a022..88a9f4343d 100644 --- a/files/fr/web/css/-moz-context-properties/index.md +++ b/files/fr/web/css/-moz-context-properties/index.md @@ -67,7 +67,7 @@ Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{c fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> ``` -Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. +Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. > **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/). diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md index 9c79636659..c631b3cc21 100644 --- a/files/fr/web/css/-moz-user-focus/index.md +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -25,7 +25,7 @@ La propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation. -> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. +> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. ## Syntaxe diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md index 6b9a4a80fc..408d26d0b1 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.md +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -46,8 +46,8 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```html <p> - Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes. - Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped. + Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes. + Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped. </p> ``` @@ -55,10 +55,10 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```css p { - width: 300px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + width: 300px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; overflow: hidden; } ``` @@ -81,5 +81,5 @@ p { ## Voir aussi -- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) +- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) - {{cssxref("line-clamp")}} diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md index dd2d49dc17..e0cdd0cd7e 100644 --- a/files/fr/web/css/-webkit-mask-box-image/index.md +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -51,7 +51,7 @@ Où : - `stretch` - : L'image de masque est étirée pour être contenue exactement dans la boîte de bordure. - `round` - - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. + - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. ## Exemples diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md index 45941093f2..1dc612d4b3 100644 --- a/files/fr/web/css/-webkit-mask-position-x/index.md +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -42,7 +42,7 @@ La propriété **`-webkit-mask-position-x`** permet de définir la position hori ### Valeurs - `<length-percentage>` - - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). + - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). - **`left`** - : Un mot-clé équivalent à `0%`. - **`right`** diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md index b2568be318..b481bb80bf 100644 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-x: repeat, space; + -webkit-mask-repeat-x: repeat, space; } ``` diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md index 717f2f1aaa..8e828aa3b6 100644 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-y: repeat, space; + -webkit-mask-repeat-y: repeat, space; } ``` diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md index daa7e6ceb9..a6642239ad 100644 --- a/files/fr/web/css/@charset/index.md +++ b/files/fr/web/css/@charset/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@charset --- {{CSSRef}} -La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. +La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. ```css @charset "utf-8"; @@ -34,7 +34,7 @@ Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une fe où - `charset` - - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé. + - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé. ### Syntaxe formelle diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md index 88bd654e07..76cc1a18b2 100644 --- a/files/fr/web/css/@counter-style/fallback/index.md +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/@counter-style/fallback Le descripteur **`fallback`**, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur `decimal` qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont : - Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle. -- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. +- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. ## Syntaxe diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md index e1c85ee212..d1a55dc889 100644 --- a/files/fr/web/css/@counter-style/system/index.md +++ b/files/fr/web/css/@counter-style/system/index.md @@ -47,7 +47,7 @@ Ce descripteur peut prendre l'une de ces trois formes : - : Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres `a` à `z` sont définies comme symbole dans un style de compteur dont le système est `alphabetic`, les 26 premières représentations du compteur seront `a`, `b`, etc. jusqu'à `z` (jusqu'ici, le comportement est identique à celui obtenu grâce à `symbolic`) mais ensuite, le système poursuivra avec `aa`, `ab`, `ac`, etc. Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme `1`, le suivant comme `2` et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives. - `numeric` - - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. + - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. - `additive` - : Ce système peut être utilisé pour représenter [des systèmes de numérotations additives](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que `range` est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec `decimal` (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme `upper-roman` ou `lower-roman` afin d'éviter de réinventer la roue. - `extends` @@ -79,11 +79,11 @@ Ce descripteur peut prendre l'une de ces trois formes : ```html <ul class="list"> - <li>Un</li> - <li>Deux</li> - <li>Trois</li> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> <li>Quatre</li> - <li>Cinq</li> + <li>Cinq</li> </ul> ``` diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 9df7d20450..cd62f4a518 100644 --- a/files/fr/web/css/@document/index.md +++ b/files/fr/web/css/@document/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@document --- {{CSSRef}}{{SeeCompatTable}} -La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur. +La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur. ```css @document url("https://www.example.com/") { @@ -24,15 +24,15 @@ La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les Une règle `@document` peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont : -- `url()`, qui établit une correspondance avec une URL exacte ; -- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; -- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; +- `url()`, qui établit une correspondance avec une URL exacte ; +- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; +- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; - `media-document()` qui caractérise le type de document : vidéo, image, plugin, tout ; -- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. +- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. -Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. +Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. -Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). +Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). > **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}). @@ -67,7 +67,7 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Spécifications -[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. +[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. ## Compatibilité des navigateurs @@ -75,4 +75,4 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Voir aussi -- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. +- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md index d536c50a2a..0089e97edd 100644 --- a/files/fr/web/css/@font-face/font-display/index.md +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-display --- {{CSSRef}} -La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. +La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. ## Le déroulement de l'affichage d'une police diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.md b/files/fr/web/css/@font-face/font-variation-settings/index.md index b1c2e35474..493ba219fb 100644 --- a/files/fr/web/css/@font-face/font-variation-settings/index.md +++ b/files/fr/web/css/@font-face/font-variation-settings/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-variation-settings --- {{CSSRef}} -Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. +Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. ## Syntaxe diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md index 7084f72a43..502d694766 100644 --- a/files/fr/web/css/@font-face/index.md +++ b/files/fr/web/css/@font-face/index.md @@ -59,7 +59,7 @@ La règle `@font-face` peut être utilisée au niveau global d'une feuille de st Les types utilisables sont : `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"` et `"svg"`. - {{cssxref("@font-face/unicode-range", "unicode-range")}} - - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. + - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. ### Syntaxe formelle diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md index 6b1211f0f1..03b945a2b4 100644 --- a/files/fr/web/css/@font-feature-values/index.md +++ b/files/fr/web/css/@font-feature-values/index.md @@ -15,7 +15,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux au @font-feature-values Font One { /* On active la caractéristique nice-style sur Font One */ - @styleset { + @styleset { nice-style: 12; } } @@ -52,7 +52,7 @@ La règle @ `@font-feature-values` peut être utilisée au plus haut niveau d'un - `@styleset` - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : `ident1: 2 4 12 1` correspondra aux valeurs OpenType `ss02`, `ss04`, `ss12`, `ss01`. Les valeurs supérieures à `99` sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées. - `@character-variant` - - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. + - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. ### Syntaxe formelle diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index b803960cde..e7e7053bb9 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -66,16 +66,16 @@ Les déclarations qui utilisent `!important` dans une description d'étape sont ```css @keyframes important1 { - from { margin-top: 50px; } - 50% { margin-top: 150px !important; } /* ignorée */ - to { margin-top: 100px; } + from { margin-top: 50px; } + 50% { margin-top: 150px !important; } /* ignorée */ + to { margin-top: 100px; } } @keyframes important2 { from { margin-top: 50px; - margin-bottom: 100px; } - to { margin-top: 150px !important; /* ignorée */ - margin-bottom: 50px; } + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignorée */ + margin-bottom: 50px; } } ``` diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md index 9ec09a1821..c49fc851ef 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio --- {{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}} -La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. > **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme. > @@ -26,7 +26,7 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries# > > Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`. -> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. +> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. ## Syntaxe diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md index d14a4b5549..8bb11bc1f1 100644 --- a/files/fr/web/css/@media/-webkit-animation/index.md +++ b/files/fr/web/css/@media/-webkit-animation/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/@media/-webkit-animation ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md index 90a9cf0635..f4231a0652 100644 --- a/files/fr/web/css/@media/-webkit-transform-2d/index.md +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md @@ -16,7 +16,7 @@ translation_of: Web/CSS/@media/-webkit-transform-2d ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md index bc50ddcdbb..b87fada85f 100644 --- a/files/fr/web/css/@media/-webkit-transition/index.md +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -29,7 +29,7 @@ S'il vous faut déterminer si les transitions CSS sont prises en charges, évite ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md index 117e647809..af5d16e56d 100644 --- a/files/fr/web/css/@media/device-height/index.md +++ b/files/fr/web/css/@media/device-height/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/@media/device-height ## Syntaxe -La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. +La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. ## Exemples diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md index 5d28532ff3..470aa8a161 100644 --- a/files/fr/web/css/@media/monochrome/index.md +++ b/files/fr/web/css/@media/monochrome/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@media/monochrome --- {{CSSRef}} -**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. +**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. ## Syntaxe diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 33d90f2617..b10eb3db17 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -34,12 +34,12 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ```css .contrast { - color: grey; + color: grey; } @media (prefers-contrast: high) { .contrast { - color: black; + color: black; } } ``` diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index 6bd87e7c10..49fbd4b330 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -21,7 +21,7 @@ La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_f Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau : - Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome. -- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows +- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows - Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations. - Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations. - Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations. diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md index edf2c2a7f9..b758e23e5d 100644 --- a/files/fr/web/css/@media/shape/index.md +++ b/files/fr/web/css/@media/shape/index.md @@ -38,19 +38,19 @@ La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies ```css h1 { - text-align: left; + text-align: left; } @media (shape: rect) { - h1 { - text-align: left; - } + h1 { + text-align: left; + } } @media (shape: round) { - h1 { - text-align: center; - } + h1 { + text-align: center; + } } ``` @@ -64,9 +64,9 @@ Ce fragment de code HTML permettra d'appliquer une feuille de style particulièr ```html <head> - <link rel="stylesheet" href="default.css" /> - <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> - <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> + <link rel="stylesheet" href="default.css" /> + <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> + <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> ``` diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md index 563e341e7e..57fe1e07ab 100644 --- a/files/fr/web/css/@page/index.md +++ b/files/fr/web/css/@page/index.md @@ -68,7 +68,7 @@ Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}} | {{Spec2('CSS Logical Properties')}} | Ajout des sélecteurs de page `:recto` et `:verso`. | -| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | +| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | | {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md index bc30e0b52f..1ff14ce9c6 100644 --- a/files/fr/web/css/@property/index.md +++ b/files/fr/web/css/@property/index.md @@ -37,9 +37,9 @@ Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invaliden ## Exemples -Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : -Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --my-color { @@ -49,7 +49,7 @@ Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/A } ``` -Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : +Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : ```js window.CSS.registerProperty({ diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md index f142fe1ba4..53cbf5d437 100644 --- a/files/fr/web/css/@supports/index.md +++ b/files/fr/web/css/@supports/index.md @@ -43,7 +43,7 @@ La plus simple expression est une déclaration CSS, c'est-à-dire un nom de prop @supports ( transform-origin: 5% 5% ) { } ``` -renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. +renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. Une déclaration CSS est toujours encadrée par des parenthèses. @@ -161,9 +161,9 @@ sera ainsi équivalente à : ```css @supports (--toto: green) { - body { - color: --nomVar; - } + body { + color: --nomVar; + } } ``` diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index 92b0e71726..1b5fe193b3 100644 --- a/files/fr/web/css/_colon_-moz-broken/index.md +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-broken --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [p](/en-US/docs/Web/CSS)[seudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. +La [pseudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md index 6007b9e0d4..7c444ffea4 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.md +++ b/files/fr/web/css/_colon_-moz-first-node/index.md @@ -37,7 +37,7 @@ span:-moz-first-node { </p> <p> Bip bop bip bop - <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> + <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> </p> ``` diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md index b2d49eef88..f375956947 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.md +++ b/files/fr/web/css/_colon_-moz-last-node/index.md @@ -36,7 +36,7 @@ span:-moz-last-node { <span>:-moz-last-node</span> </p> <p> - <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> + <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> Bip bop bip bop. </p> ``` diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index 5c0f9b29bc..adf074f24c 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -63,5 +63,5 @@ Cette pseudo-classe a été renommée en `:blank` dans {{SpecName("CSS4 Selector ## Voir aussi -- {{CSSxRef(":blank")}} {{Experimental_Inline}} +- {{CSSxRef(":blank")}} {{Experimental_Inline}} - {{CSSxRef(":empty")}} diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md index 46b0a59daf..64bcfbd499 100644 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-user-disabled --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. +La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md index 8317472411..0ac341a304 100644 --- a/files/fr/web/css/_colon_active/index.md +++ b/files/fr/web/css/_colon_active/index.md @@ -89,7 +89,7 @@ form button { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Aucune modification. | diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md index b1b7827003..140845954f 100644 --- a/files/fr/web/css/_colon_autofill/index.md +++ b/files/fr/web/css/_colon_autofill/index.md @@ -27,4 +27,4 @@ Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et - [Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.](https://code.google.com/p/chromium/issues/detail?id=46543) - [Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.](https://bugs.webkit.org/show_bug.cgi?id=66032) -- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) +- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md index 87d8eb5f2f..1e3bbe4443 100644 --- a/files/fr/web/css/_colon_empty/index.md +++ b/files/fr/web/css/_colon_empty/index.md @@ -13,7 +13,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:empty`** correspond à u ```css /* Cible tous les éléments <div> qui */ -/* n'ont pas de contenu */ +/* n'ont pas de contenu */ div:empty { background: lime; } diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md index dfbce41751..e62de1022b 100644 --- a/files/fr/web/css/_colon_first-child/index.md +++ b/files/fr/web/css/_colon_first-child/index.md @@ -107,4 +107,4 @@ li:first-child{ - {{cssxref(":last-child")}} - {{CSSxRef(":nth-child", ":nth-child()")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md index 037dba0868..e225b8d815 100644 --- a/files/fr/web/css/_colon_first-of-type/index.md +++ b/files/fr/web/css/_colon_first-of-type/index.md @@ -31,7 +31,7 @@ p:first-of-type { ```css div :first-of-type { - background-color: lime; + background-color: lime; } ``` diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md index f5deaa99f2..ad6173dfc1 100644 --- a/files/fr/web/css/_colon_focus-visible/index.md +++ b/files/fr/web/css/_colon_focus-visible/index.md @@ -14,7 +14,7 @@ La pseudo-classe **`:focus-visible`** s'applique lorsqu'un élément correspond Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier). -On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. +On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. ## Syntaxe diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md index 0b530933ca..4c40f35b73 100644 --- a/files/fr/web/css/_colon_focus-within/index.md +++ b/files/fr/web/css/_colon_focus-within/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:focus-within --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). ```css /* Cible n'importe quel <div> lorsqu'un */ diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md index 2188885f3e..05179d7ca0 100644 --- a/files/fr/web/css/_colon_focus/index.md +++ b/files/fr/web/css/_colon_focus/index.md @@ -79,5 +79,5 @@ Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre i ## Voir aussi -- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} +- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} - {{cssxref(":focus-within")}} diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md index 3855532430..dd1b4d71c1 100644 --- a/files/fr/web/css/_colon_fullscreen/index.md +++ b/files/fr/web/css/_colon_fullscreen/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:fullscreen --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. ## Syntaxe diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md index ef82a54d5a..16b836e618 100644 --- a/files/fr/web/css/_colon_future/index.md +++ b/files/fr/web/css/_colon_future/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :future(p, span) { - display: none; + display: none; } ``` @@ -33,12 +33,12 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` -### WebVTT +### WebVTT FICHIER WEBVTT diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md index 1228857671..e0dfa1c855 100644 --- a/files/fr/web/css/_colon_host()/index.md +++ b/files/fr/web/css/_colon_host()/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:host() La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte. -Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. +Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. > **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_. @@ -19,7 +19,7 @@ Le scénario principal pour utiliser cette fonction consiste à vouloir cibler u /* On cible l'hôte du shadow DOM uniquement s'il correspond au sélecteur passé en argument */ :host(.special-custom-element) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_colon_host-context()/index.md b/files/fr/web/css/_colon_host-context()/index.md index f1c99619f4..cc5d41645f 100644 --- a/files/fr/web/css/_colon_host-context()/index.md +++ b/files/fr/web/css/_colon_host-context()/index.md @@ -21,7 +21,7 @@ Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — `h1 /* Cible un hôte uniquement si c'est un descendant du sélecteur passé en argument */ :host-context(h1) { - font-weight: bold; + font-weight: bold; } :host-context(main article) { diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md index 83237f7080..def98a9b7d 100644 --- a/files/fr/web/css/_colon_host/index.md +++ b/files/fr/web/css/_colon_host/index.md @@ -16,7 +16,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler ```css /* Cible la racine d'un hôte de shadow DOM */ :host { - font-weight: bold; + font-weight: bold; } ``` @@ -28,7 +28,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler Les fragments de code qui suivent sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat _live_](https://mdn.github.io/web-components-examples/host-selectors/)). -Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : +Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : ```html <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md index c1ee18e528..e9a8e5d9fd 100644 --- a/files/fr/web/css/_colon_hover/index.md +++ b/files/fr/web/css/_colon_hover/index.md @@ -19,7 +19,7 @@ a:hover { } ``` -La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. +La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. La pseudo-classe `:hover` peut être appliquée à n'importe quel [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements). {{experimental_inline}} @@ -57,10 +57,10 @@ a:hover { | Spécification | Commentaires | Retours | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | | {{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}} | Permet d'appliquer `:hover` à n'importe quel pseudo-élément. | [Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)](https://github.com/w3c/csswg-drafts/issues) | -| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | +| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md index caaa2a95b3..c152116440 100644 --- a/files/fr/web/css/_colon_is/index.md +++ b/files/fr/web/css/_colon_is/index.md @@ -19,11 +19,11 @@ La plupart des navigateurs prennent encore en charge cette fonctionnalité via ` ```css /* Sélectionne n'importe quel paragraphe survolé - qui se trouve au sein d'un header, main, ou - footer */ + qui se trouve au sein d'un header, main, ou + footer */ :is(header, main, footer) p:hover { - color: red; - cursor: pointer; + color: red; + cursor: pointer; } /* La notation précédente est équivalente à */ @@ -31,7 +31,7 @@ header p:hover, main p:hover, footer p:hover { color: red; - cursor: pointer; + cursor: pointer; } @@ -166,7 +166,7 @@ pourra être remplacée par : } ``` -En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : +En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : ```css :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) { @@ -178,7 +178,7 @@ En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section La pseudo-classe `:matches` est particulièrement utile lorsqu'on manipule les [sections et en-têtes](/en-US/docs/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans `:matches()`) s'avèrerait plutôt compliqué. -Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : +Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : ```css /* Niveau 0 */ @@ -224,7 +224,7 @@ h1 { } ``` -### Éviter l'invalidation d'une liste de sélecteur +### Éviter l'invalidation d'une liste de sélecteur À la différence des listes de sélecteurs, la pseudo-classe `:is()` ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur. @@ -234,7 +234,7 @@ h1 { } ``` -Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : +Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : ```css :valid, :incompatible { @@ -242,13 +242,13 @@ Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:va } ``` -L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. +L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. ## Notes ### Problèmes de performances avec `any():` et la spécificité -{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. +{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. Ainsi : @@ -282,5 +282,5 @@ et cette dernière version sera plus rapide : ## Voir aussi -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md index 97f45b245c..ab13e127a5 100644 --- a/files/fr/web/css/_colon_last-child/index.md +++ b/files/fr/web/css/_colon_last-child/index.md @@ -65,4 +65,4 @@ li:last-child { - {{cssxref(":first-child")}} - {{cssxref(":nth-child")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md index 17e37bbabf..c4d6739dc9 100644 --- a/files/fr/web/css/_colon_link/index.md +++ b/files/fr/web/css/_colon_link/index.md @@ -64,7 +64,7 @@ a:link { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#link', ':link')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#link', ':link')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}} | {{Spec2('CSS2.1')}} | Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}. | diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md index 585db97844..bbb7009e8d 100644 --- a/files/fr/web/css/_colon_local-link/index.md +++ b/files/fr/web/css/_colon_local-link/index.md @@ -48,4 +48,4 @@ a:local-link { ## Voir aussi -- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} +- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md index 679a2616ff..45f4c0f620 100644 --- a/files/fr/web/css/_colon_not/index.md +++ b/files/fr/web/css/_colon_not/index.md @@ -25,7 +25,7 @@ La [spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance > > - Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*)` va exclure tous les éléments et ne sera jamais appliqué. > - À l'inverse, il est possible d'augmenter la [spécificitié](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte. -> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. +> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. > - Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, `body :not(table) a` s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie `:not()` du sélecteur. ## Syntaxe diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.md b/files/fr/web/css/_colon_nth-last-of-type/index.md index 7c87c93290..fe04b5e476 100644 --- a/files/fr/web/css/_colon_nth-last-of-type/index.md +++ b/files/fr/web/css/_colon_nth-last-of-type/index.md @@ -32,7 +32,7 @@ La pseudo-classe `nth-last-of-type` prend un seul argument qui représente le mo ## Exemples -Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : +Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : ### CSS diff --git a/files/fr/web/css/_colon_nth-of-type/index.md b/files/fr/web/css/_colon_nth-of-type/index.md index 0d76ca640d..56404e6f94 100644 --- a/files/fr/web/css/_colon_nth-of-type/index.md +++ b/files/fr/web/css/_colon_nth-of-type/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:nth-of-type --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. ```css /* Sélectionne chaque élément de type <p> dont diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md index 9f04b643c6..a4c19c6c39 100644 --- a/files/fr/web/css/_colon_only-child/index.md +++ b/files/fr/web/css/_colon_only-child/index.md @@ -48,11 +48,11 @@ span:only-child { </div> <div> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md index 01d467a2af..78f13cfb6e 100644 --- a/files/fr/web/css/_colon_optional/index.md +++ b/files/fr/web/css/_colon_optional/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:optional --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. ```css /* Cible les élméents <input> qui sont optionnels */ diff --git a/files/fr/web/css/_colon_past/index.md b/files/fr/web/css/_colon_past/index.md index 46d313140c..d44c6cb8fb 100644 --- a/files/fr/web/css/_colon_past/index.md +++ b/files/fr/web/css/_colon_past/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :past(p, span) { - display: none; + display: none; } ``` @@ -33,8 +33,8 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` diff --git a/files/fr/web/css/_colon_placeholder-shown/index.md b/files/fr/web/css/_colon_placeholder-shown/index.md index 6bc13d87d0..c05e159f1f 100644 --- a/files/fr/web/css/_colon_placeholder-shown/index.md +++ b/files/fr/web/css/_colon_placeholder-shown/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:placeholder-shown --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). ```css /* Cible tout élément <input> ou <textarea> avec un */ diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md index d869d73b36..12c7a0ae20 100644 --- a/files/fr/web/css/_colon_right/index.md +++ b/files/fr/web/css/_colon_right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:right --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. ```css /* Sélectionne le contenu des pages droites */ @@ -31,7 +31,7 @@ La position de la page (à gauche ou à droite) dépend de la direction d'écrit ```css @page :right { - margin: 2cm 3cm; + margin: 2cm 3cm; } ``` diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md index c083b22e9a..e87e29f67b 100644 --- a/files/fr/web/css/_colon_target-within/index.md +++ b/files/fr/web/css/_colon_target-within/index.md @@ -30,14 +30,14 @@ La pseudo-classe `:target-within` peut être utilisée pour mettre en avant un a ```html <h3>Table des matières</h3> <ol> - <li><a href="#p1">Aller au premier paragraphe !</a></li> - <li><a href="#p2">Aller au second paragraphe !</a></li> + <li><a href="#p1">Aller au premier paragraphe !</a></li> + <li><a href="#p2">Aller au second paragraphe !</a></li> </ol> <article> <h3>Mon bel article</h3> - <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> - <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> + <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> + <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> </article> ``` diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md index 5d3ca51a11..b16934c949 100644 --- a/files/fr/web/css/_colon_target/index.md +++ b/files/fr/web/css/_colon_target/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:target --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. ```css /* Cible un élément dont l'identifiant */ @@ -82,9 +82,9 @@ La pseudo-classe `:target` s'accommode également des éléments qui ne sont pas ```html <p><a href="#newcomment">Ajouter un commentaire</a></p> <div id="newcomment"> - <form> - <p>Saisir un commentaire :<br /> - <textarea></textarea></p> + <form> + <p>Saisir un commentaire :<br /> + <textarea></textarea></p> </form> </div> ``` diff --git a/files/fr/web/css/_colon_visited/index.md b/files/fr/web/css/_colon_visited/index.md index 2de38cc227..d0aa46737a 100644 --- a/files/fr/web/css/_colon_visited/index.md +++ b/files/fr/web/css/_colon_visited/index.md @@ -17,13 +17,13 @@ a:visited { } ``` -Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). +Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). ## Restrictions Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe : -- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} +- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} - Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}. - La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est `0`, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité). - Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités. diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md index 2ebec4bdd2..d96f066576 100644 --- a/files/fr/web/css/_colon_where/index.md +++ b/files/fr/web/css/_colon_where/index.md @@ -31,5 +31,5 @@ La différence entre `:where()` et {{CSSxRef(":is", ":is()")}} est la suivante : ## Voir aussi -- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} +- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md index 6003a42e0c..1437195349 100644 --- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md +++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/::-moz-color-swatch Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::-moz-color-swatch`** est [un pseudo-élément spécifique à Mozilla](/fr/docs/Web/CSS/Extensions_Mozilla) qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec `type="color"`. -> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. +> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. ## Syntax diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md index 3c000979d9..e01f931059 100644 --- a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md @@ -44,4 +44,4 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e - {{cssxref("::-webkit-outer-spin-button")}} - {{cssxref("::-webkit-textfield-decoration-container")}} -- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) +- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md index 0b9d310140..0d300c9bf4 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md @@ -20,11 +20,11 @@ Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la por ```css progress { - -webkit-appearance: none; + -webkit-appearance: none; } ::-webkit-progress-value { - background-color: orange; + background-color: orange; } ``` diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md index 9df2d0d767..584a693711 100644 --- a/files/fr/web/css/_doublecolon_after/index.md +++ b/files/fr/web/css/_doublecolon_after/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/::after --- {{CSSRef}} -En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». +En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». ```css /* Ajoute une flèche après les liens */ @@ -20,19 +20,19 @@ a:after { } ``` -> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. +> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. ## Syntaxe {{csssyntax}} -> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. +> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. ## Exemples ### Utilisation simple -Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. +Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. #### HTML diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md index 9527c6b0a9..1adb0c69cd 100644 --- a/files/fr/web/css/_doublecolon_first-letter/index.md +++ b/files/fr/web/css/_doublecolon_first-letter/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/::first-letter --- {{CSSRef}} -Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. +Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. ```css /* Sélectionne la première lettre */ @@ -59,7 +59,7 @@ Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un b - Toutes les propriétés liées à `padding` : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}. - Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées. - La propriété {{cssxref("color")}} . -- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). +- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne. diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md index 6fadbb0d69..8041e157fc 100644 --- a/files/fr/web/css/_doublecolon_first-line/index.md +++ b/files/fr/web/css/_doublecolon_first-line/index.md @@ -28,7 +28,7 @@ Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de d - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md index 190d0fb172..8d928ebd60 100644 --- a/files/fr/web/css/_doublecolon_part/index.md +++ b/files/fr/web/css/_doublecolon_part/index.md @@ -30,7 +30,7 @@ custom-element::part(foo) { ### `<tabbed-custom-element>` -#### Arbre fantôme `<tabbed-custom-element>` +#### Arbre fantôme `<tabbed-custom-element>` ```html <style type="text/css"> @@ -85,7 +85,7 @@ tabbed-custom-element::part(active tab) { ## Spécifications -| Spécification | État | Commentaires | +| Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------------------- | -------------------- | | {{SpecName("CSS Shadow Parts", "#part", "::part")}} | {{Spec2("CSS Shadow Parts")}} | Définition initiale. | @@ -95,6 +95,6 @@ tabbed-custom-element::part(active tab) { ## Voir aussi -- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` +- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` - L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre _shadow_ imbriqué vers un arbre classique - [Utilisation de CSS Shadow : `::part` et `::theme`](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md) diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md index e5a5a5f7bd..c5e708bbb1 100644 --- a/files/fr/web/css/_doublecolon_placeholder/index.md +++ b/files/fr/web/css/_doublecolon_placeholder/index.md @@ -22,7 +22,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. @@ -38,7 +38,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu ```css input::placeholder { - color: red; + color: red; } ``` diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md index 1f7e5f9bc4..8c30297085 100644 --- a/files/fr/web/css/_doublecolon_slotted/index.md +++ b/files/fr/web/css/_doublecolon_slotted/index.md @@ -17,12 +17,12 @@ Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmle ```css /* Cible n'importe quel élément placé dans un emplacement */ ::slotted(*) { - font-weight: bold; + font-weight: bold; } /* Cible n'importe quel élément <span> placé dans un emplacement */ ::slotted(span) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_doublecolon_target-text/index.md b/files/fr/web/css/_doublecolon_target-text/index.md index 77125839b7..61a88952b9 100644 --- a/files/fr/web/css/_doublecolon_target-text/index.md +++ b/files/fr/web/css/_doublecolon_target-text/index.md @@ -10,7 +10,7 @@ Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/en-US/docs/Web/CS ```css ::target-text { - background-color: pink; + background-color: pink; } ``` diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md index 3b1da90c80..8d4ecd66fa 100644 --- a/files/fr/web/css/accent-color/index.md +++ b/files/fr/web/css/accent-color/index.md @@ -85,4 +85,4 @@ input.custom { - L'élément {{HTMLElement("input")}} - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) - Le type de donnée {{cssxref("<color>")}} -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.md b/files/fr/web/css/adjacent_sibling_combinator/index.md index edd67d5fde..6ca2059096 100644 --- a/files/fr/web/css/adjacent_sibling_combinator/index.md +++ b/files/fr/web/css/adjacent_sibling_combinator/index.md @@ -52,7 +52,7 @@ li:first-of-type + li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------ | | {{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}} | {{Spec2('CSS4 Selectors')}} | Renomme ce sélecteur en « _next-sibling combinator_ ». | -| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/align-items/index.md b/files/fr/web/css/align-items/index.md index c28220d0e1..ab7c6615d6 100644 --- a/files/fr/web/css/align-items/index.md +++ b/files/fr/web/css/align-items/index.md @@ -240,7 +240,7 @@ display.addEventListener('change', function (evt) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md index f06d597f72..3648cc14a9 100644 --- a/files/fr/web/css/align-self/index.md +++ b/files/fr/web/css/align-self/index.md @@ -125,9 +125,9 @@ align-self: unset; ```html <div class="flex-container"> - <p class="element-flex center">Milieu</p> - <p class="element-flex baseline">Base</p> - <p class="element-flex stretch">Étiré</p> + <p class="element-flex center">Milieu</p> + <p class="element-flex baseline">Base</p> + <p class="element-flex stretch">Étiré</p> </div> ``` @@ -139,7 +139,7 @@ align-self: unset; | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Flexbox")}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md index eb9cec8e9d..62e2dfd057 100644 --- a/files/fr/web/css/all/index.md +++ b/files/fr/web/css/all/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/all --- {{CSSRef}} -La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. +La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. {{EmbedInteractiveExample("pages/css/all.html")}} diff --git a/files/fr/web/css/angle-percentage/index.md b/files/fr/web/css/angle-percentage/index.md index 3e88cfb95e..079d9089a2 100644 --- a/files/fr/web/css/angle-percentage/index.md +++ b/files/fr/web/css/angle-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'il est possible d'utiliser une valeur de type `<angle-percentage>` dans u | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<angle-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md index d7ce3f0153..7799da0269 100644 --- a/files/fr/web/css/angle/index.md +++ b/files/fr/web/css/angle/index.md @@ -82,7 +82,7 @@ Même si toutes les unités exprimeront une valeur nulle identique, l'unité **d | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#angles', '<angle>')}} | {{Spec2('CSS3 Values')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md index 6d7b65d0e6..22d240ecdc 100644 --- a/files/fr/web/css/animation-delay/index.md +++ b/files/fr/web/css/animation-delay/index.md @@ -31,7 +31,7 @@ animation-delay: 2s, 4ms; - `<time>` - : La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide. -> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md index 7a45e9ebaa..d0ff9ae665 100644 --- a/files/fr/web/css/animation-direction/index.md +++ b/files/fr/web/css/animation-direction/index.md @@ -92,8 +92,8 @@ p { </p> <p class="retour"> - « Revenez, » lui cria la Chenille. « J’ai quelque chose - d’important à vous dire ! » + « Revenez, » lui cria la Chenille. « J’ai quelque chose + d’important à vous dire ! » </p> ``` diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md index f2441ca1f0..1c2d07952c 100644 --- a/files/fr/web/css/animation-iteration-count/index.md +++ b/files/fr/web/css/animation-iteration-count/index.md @@ -37,9 +37,9 @@ La propriété `animation-iteration-count` est définie avec une ou plusieurs va ### Valeurs - `infinite` - - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. + - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. - `<number>` - - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). + - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). > **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). @@ -89,7 +89,7 @@ p { </p> <p class="dix"> - Voyons si je me souviendrai de tout ce que je savais : quatre fois + Voyons si je me souviendrai de tout ce que je savais : quatre fois cinq font douze, quatre fois six font treize, quatre fois sept font — je n’arriverai jamais à vingt de ce train-là. </p> diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md index 9a1e643d7a..5bd168d765 100644 --- a/files/fr/web/css/animation-play-state/index.md +++ b/files/fr/web/css/animation-play-state/index.md @@ -39,7 +39,7 @@ animation-play-state: unset; - `paused` - : L'animation est en pause. -> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md index 7a93b3ee20..cb1f9c9a39 100644 --- a/files/fr/web/css/animation-timing-function/index.md +++ b/files/fr/web/css/animation-timing-function/index.md @@ -94,7 +94,7 @@ Une fonction de progression pour une animation qui est définie pour une étape - `step-end` - : Synonyme de `steps(1, jump-end)` -> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). +> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). ### Syntaxe formelle diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md index 2c15a43411..2bbd9880e7 100644 --- a/files/fr/web/css/animation/index.md +++ b/files/fr/web/css/animation/index.md @@ -239,7 +239,7 @@ L'ordre des valeurs est également important pour chaque définition d'animation ### Valeurs - `<single-animation-iteration-count>` - - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. + - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. - `<single-animation-direction>` - : La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}. - `<single-animation-fill-mode>` diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md index 4e7925541b..0309ff17b0 100644 --- a/files/fr/web/css/aspect-ratio/index.md +++ b/files/fr/web/css/aspect-ratio/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.aspect-ratio --- {{CSSRef}} -La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. +La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. ```css aspect-ratio: 1 / 1; @@ -44,9 +44,9 @@ aspect-ratio: 16 / 9; ## Correspondance entre largeur et hauteur avec aspect-ratio -Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. +Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. -Sur Firefox, la règle de la feuille de styles interne ressemble à cela : +Sur Firefox, la règle de la feuille de styles interne ressemble à cela : ```css img, input[type="image"], video, embed, iframe, marquee, object, table { diff --git a/files/fr/web/css/attribute_selectors/index.md b/files/fr/web/css/attribute_selectors/index.md index 8ab8566828..cb79757ed6 100644 --- a/files/fr/web/css/attribute_selectors/index.md +++ b/files/fr/web/css/attribute_selectors/index.md @@ -51,15 +51,15 @@ a[class~="logo"] { - `[attr~=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est `valeur`. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé. - `[attr|=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. + - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. - `[attr^=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur commence par `valeur`. - `[attr$=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur se termine par `valeur`. - `[attr*=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. + - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. - `[attr operateur valeur i]` - - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). + - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). - `[attr operateur valeur s]` {{experimental_inline}} - : Ajouter un `s` (ou `S`) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII). @@ -214,7 +214,7 @@ ol[type="A" s] { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS4 Selectors')}} | Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse. | -| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/background-color/index.md b/files/fr/web/css/background-color/index.md index 474f17a985..b0feacda10 100644 --- a/files/fr/web/css/background-color/index.md +++ b/files/fr/web/css/background-color/index.md @@ -35,7 +35,7 @@ background-color: rgb(255, 255, 128); background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */ - + /* Valeur HSLA */ background-color: hsla(50, 33%, 25%, 0.75); @@ -116,8 +116,8 @@ Le ratio de contraste entre les couleurs est déterminé en comparant la luminos | Spécification | Commentaires | Retours | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}} | Le mot-clé `transparent` a été retiré de la propriété pour être intégré au type de données {{cssxref("<color>")}} (dans la pratique, il n'y a aucune différence). | [_Issues_ GitHub pour la spécification Background de niveau 3 (en anglais)](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | -| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | +| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | +| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | {{cssinfo}} diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md index 03d62fdef2..c8ed834f44 100644 --- a/files/fr/web/css/background-position-x/index.md +++ b/files/fr/web/css/background-position-x/index.md @@ -16,7 +16,7 @@ Pour plus d'informations, se référer à la documentation de la propriété {{c {{EmbedInteractiveExample("pages/css/background-position-x.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. ## Syntaxe diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md index ac91b537cf..8e3cdd11c1 100644 --- a/files/fr/web/css/background-position-y/index.md +++ b/files/fr/web/css/background-position-y/index.md @@ -14,7 +14,7 @@ La propriété **`background-position-y`** définit la position verticale initia {{EmbedInteractiveExample("pages/css/background-position-y.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. ## Syntaxe diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md index 759f147f5e..bb2b9447ef 100644 --- a/files/fr/web/css/basic-shape/index.md +++ b/files/fr/web/css/basic-shape/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/basic-shape --- {{CSSRef}} -Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. +Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} @@ -85,7 +85,7 @@ Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe : Les valeurs d'une fonction `<basic-shape>` sont calculées comme indiqué, avec ces exceptions : - Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut. -- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. +- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. - Pour `inset()`, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages. ## L'interpolation des formes simples diff --git a/files/fr/web/css/border-block-end-color/index.md b/files/fr/web/css/border-block-end-color/index.md index 0ec14f6de2..3c10d3fcd5 100644 --- a/files/fr/web/css/border-block-end-color/index.md +++ b/files/fr/web/css/border-block-end-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-color.html")}} diff --git a/files/fr/web/css/border-block-end-style/index.md b/files/fr/web/css/border-block-end-style/index.md index 4ca9575ace..15d3b4c18d 100644 --- a/files/fr/web/css/border-block-end-style/index.md +++ b/files/fr/web/css/border-block-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-style.html")}} diff --git a/files/fr/web/css/border-block-end-width/index.md b/files/fr/web/css/border-block-end-width/index.md index 114e01a91e..57c32bf80c 100644 --- a/files/fr/web/css/border-block-end-width/index.md +++ b/files/fr/web/css/border-block-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-width.html")}} diff --git a/files/fr/web/css/border-block-end/index.md b/files/fr/web/css/border-block-end/index.md index e449f9d7a3..058f278605 100644 --- a/files/fr/web/css/border-block-end/index.md +++ b/files/fr/web/css/border-block-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-block-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-start-color/index.md b/files/fr/web/css/border-block-start-color/index.md index e2330aab8f..4c7398898b 100644 --- a/files/fr/web/css/border-block-start-color/index.md +++ b/files/fr/web/css/border-block-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-color.html")}} diff --git a/files/fr/web/css/border-block-start-style/index.md b/files/fr/web/css/border-block-start-style/index.md index ddf1ca944b..531b72bb5c 100644 --- a/files/fr/web/css/border-block-start-style/index.md +++ b/files/fr/web/css/border-block-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-style.html")}} diff --git a/files/fr/web/css/border-block-start-width/index.md b/files/fr/web/css/border-block-start-width/index.md index 06219322dd..06e02919a1 100644 --- a/files/fr/web/css/border-block-start-width/index.md +++ b/files/fr/web/css/border-block-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-width.html")}} diff --git a/files/fr/web/css/border-block-start/index.md b/files/fr/web/css/border-block-start/index.md index e57a88172e..044c96e803 100644 --- a/files/fr/web/css/border-block-start/index.md +++ b/files/fr/web/css/border-block-start/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-start`** est une propriété raccourcie qui perme {{EmbedInteractiveExample("pages/css/border-block-start.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-width/index.md b/files/fr/web/css/border-block-width/index.md index eda1599a20..df5fdd60b9 100644 --- a/files/fr/web/css/border-block-width/index.md +++ b/files/fr/web/css/border-block-width/index.md @@ -20,7 +20,7 @@ border-block-width: 5px; border-block-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. +The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. {{cssinfo}} @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md index ce5f525dba..af1a59c803 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.md +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md index 1295e667a0..105daffed7 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.md +++ b/files/fr/web/css/border-bottom-right-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-end-end-radius/index.md b/files/fr/web/css/border-end-end-radius/index.md index 55f37d7d98..51d1a563c5 100644 --- a/files/fr/web/css/border-end-end-radius/index.md +++ b/files/fr/web/css/border-end-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-end-start-radius/index.md b/files/fr/web/css/border-end-start-radius/index.md index 3278a15a09..3f0d1a5269 100644 --- a/files/fr/web/css/border-end-start-radius/index.md +++ b/files/fr/web/css/border-end-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-inline-end-color/index.md b/files/fr/web/css/border-inline-end-color/index.md index a94c5a31da..8b5576c33f 100644 --- a/files/fr/web/css/border-inline-end-color/index.md +++ b/files/fr/web/css/border-inline-end-color/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} diff --git a/files/fr/web/css/border-inline-end-style/index.md b/files/fr/web/css/border-inline-end-style/index.md index 24047c8bd9..524d5e1abf 100644 --- a/files/fr/web/css/border-inline-end-style/index.md +++ b/files/fr/web/css/border-inline-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} diff --git a/files/fr/web/css/border-inline-end-width/index.md b/files/fr/web/css/border-inline-end-width/index.md index c348f4e6bc..73c3019d47 100644 --- a/files/fr/web/css/border-inline-end-width/index.md +++ b/files/fr/web/css/border-inline-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} diff --git a/files/fr/web/css/border-inline-end/index.md b/files/fr/web/css/border-inline-end/index.md index 46b6334f11..7d43dac070 100644 --- a/files/fr/web/css/border-inline-end/index.md +++ b/files/fr/web/css/border-inline-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-inline-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-inline-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-inline-start-color/index.md b/files/fr/web/css/border-inline-start-color/index.md index 36dd98be35..ce24365c8f 100644 --- a/files/fr/web/css/border-inline-start-color/index.md +++ b/files/fr/web/css/border-inline-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} diff --git a/files/fr/web/css/border-inline-start-style/index.md b/files/fr/web/css/border-inline-start-style/index.md index 77aa7d211a..99aba40c7b 100644 --- a/files/fr/web/css/border-inline-start-style/index.md +++ b/files/fr/web/css/border-inline-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} diff --git a/files/fr/web/css/border-inline-start-width/index.md b/files/fr/web/css/border-inline-start-width/index.md index abbb5ca252..88c3a08115 100644 --- a/files/fr/web/css/border-inline-start-width/index.md +++ b/files/fr/web/css/border-inline-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} diff --git a/files/fr/web/css/border-inline-width/index.md b/files/fr/web/css/border-inline-width/index.md index 79285d5a85..2deb0c5d71 100644 --- a/files/fr/web/css/border-inline-width/index.md +++ b/files/fr/web/css/border-inline-width/index.md @@ -20,7 +20,7 @@ border-inline-width: 5px; border-inline-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. +The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. ## Syntaxe @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-spacing/index.md b/files/fr/web/css/border-spacing/index.md index 20248d7b61..80257a448b 100644 --- a/files/fr/web/css/border-spacing/index.md +++ b/files/fr/web/css/border-spacing/index.md @@ -14,7 +14,7 @@ La propriété **`border-spacing`** définit la distance qu'il y a entre les bor {{EmbedInteractiveExample("pages/css/border-spacing.html")}} -La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). +La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). > **Note :** La propriété `border-spacing` équivaut à l'attribut déprécié `cellspacing` de l'élément `<table>`, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux. @@ -62,7 +62,7 @@ table { td { border: 1px solid #000; - padding: 5px; + padding: 5px; } .unevaleur { diff --git a/files/fr/web/css/border-start-end-radius/index.md b/files/fr/web/css/border-start-end-radius/index.md index 8be51ce81f..8270ffcd1b 100644 --- a/files/fr/web/css/border-start-end-radius/index.md +++ b/files/fr/web/css/border-start-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md index 6396962872..13812605cc 100644 --- a/files/fr/web/css/border-start-start-radius/index.md +++ b/files/fr/web/css/border-start-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md index c6de181fc3..41f804e617 100644 --- a/files/fr/web/css/border-top-left-radius/index.md +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -83,10 +83,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md index 1032da0ec7..691b9bfc7f 100644 --- a/files/fr/web/css/border-top-right-radius/index.md +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -85,10 +85,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md index b4a0b769d6..cf552c7a8b 100644 --- a/files/fr/web/css/border-width/index.md +++ b/files/fr/web/css/border-width/index.md @@ -126,7 +126,7 @@ La propriété `border-width` peut être définie avec une, deux, trois ou quatr } p { - width: auto; + width: auto; margin: 0.25em; padding: 0.25em; } diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md index ff56016ccf..9cc24e6f45 100644 --- a/files/fr/web/css/bottom/index.md +++ b/files/fr/web/css/bottom/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/bottom La propriété **`bottom`** contribue à la définition de l'emplacement vertical des [éléments positionnés](/fr/docs/Web/CSS/position). Elle n'a aucun effet pour les éléments non-positionnés. -{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. +{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. Pour les **éléments positionnés de façon relative**, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est `relative`, la propriété `bottom` définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale. diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md index 2ca254e1d1..eb3568c30f 100644 --- a/files/fr/web/css/box-orient/index.md +++ b/files/fr/web/css/box-orient/index.md @@ -29,7 +29,7 @@ box-orient: initial; box-orient: unset; ``` -Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. +Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. Les éléments HTML disposent leurs contenus selon l'axe _inline_ par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}. diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md index ac0ce20858..4fba78cd7a 100644 --- a/files/fr/web/css/box-pack/index.md +++ b/files/fr/web/css/box-pack/index.md @@ -77,8 +77,8 @@ div.exemple { -webkit-box-align: center; /* WebKit */ /* On groupe les éléments fils en bas de la boîte */ - -moz-box-pack: end; /* Mozilla */ - -webkit-box-pack: end; /* WebKit */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ } div.exemple p { @@ -108,7 +108,7 @@ Le « début » et la « fin » de la boîte dépendent de l'orientation et de l <table class="standard-table"> <tbody> <tr> - <th> </th> + <th></th> <th><strong>Normal</strong></th> <th><strong>Inverse</strong></th> </tr> diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md index 02c3527212..bca6e68f6b 100644 --- a/files/fr/web/css/box-sizing/index.md +++ b/files/fr/web/css/box-sizing/index.md @@ -29,7 +29,7 @@ La propriété `box-sizing` peut être utilisée afin d'ajuster ce comportement - `content-box` est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée. - `border-box` indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments. -> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. +> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. ## Syntaxe @@ -49,7 +49,7 @@ La propriété `box-sizing` peut être définie avec l'un des mots-clés suivant ### Valeurs - `content-box` - - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. + - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. - `border-box` - : Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (_padding_), la bordure, mais pas la marge. C'est le [modèle de boîte](/fr/docs/CSS/Modèle_de_boîte) utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser `border-box` pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (_padding_) et du contenu. diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md index 1131d1c309..514e951b1a 100644 --- a/files/fr/web/css/calc()/index.md +++ b/files/fr/web/css/calc()/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/calc() --- {{CSSRef}} -La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. +La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. ```css /* property: calc(expression) */ @@ -39,7 +39,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur - Une division par zéro aboutit à une erreur qui est générée par le parseur HTML. - Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif. - Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé. -- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. +- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. - Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses. ### Syntaxe formelle @@ -50,7 +50,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur ### Positionner un objet sur l’écran avec une marge -`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : +`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : ```css .banniere { diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md index b53d3eda68..8ad93c987f 100644 --- a/files/fr/web/css/child_combinator/index.md +++ b/files/fr/web/css/child_combinator/index.md @@ -60,7 +60,7 @@ div > span { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | +| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | | {{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md index f9b2c755f8..f692d1920f 100644 --- a/files/fr/web/css/clamp()/index.md +++ b/files/fr/web/css/clamp()/index.md @@ -9,9 +9,9 @@ translation_of: Web/CSS/clamp() --- {{CSSRef}} -La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. +La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. -> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. +> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. ```css width: clamp(10px, 4em, 80px); @@ -41,7 +41,7 @@ La valeur préférée correspond à la valeur qui sera utilisée si elle est sup La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure. -Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. +Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions. @@ -89,7 +89,7 @@ Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md index 1d44d777df..85535097ed 100644 --- a/files/fr/web/css/class_selectors/index.md +++ b/files/fr/web/css/class_selectors/index.md @@ -70,8 +70,8 @@ Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | -| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#class-as-selector', 'child selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md index 6f036cfd9b..8bf96194ff 100644 --- a/files/fr/web/css/clip-path/index.md +++ b/files/fr/web/css/clip-path/index.md @@ -492,10 +492,10 @@ p { .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } -.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } +.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } -.shape6 { clip-path: margin-box circle(25% at 25% 25%); } -.shape7 { clip-path: border-box circle(25% at 25% 25%); } +.shape6 { clip-path: margin-box circle(25% at 25% 25%); } +.shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md index 21947f1069..4d07894cb9 100644 --- a/files/fr/web/css/clip/index.md +++ b/files/fr/web/css/clip/index.md @@ -99,7 +99,7 @@ clip: unset; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | +| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | | {{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}} | {{Spec2('CSS3 Transitions')}} | `clip` peut être animée. | | {{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/color-scheme/index.md b/files/fr/web/css/color-scheme/index.md index 0f4b726826..04118a45b9 100644 --- a/files/fr/web/css/color-scheme/index.md +++ b/files/fr/web/css/color-scheme/index.md @@ -67,6 +67,6 @@ Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble ## Voir aussi - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} - {{cssxref("background-image")}} - {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md index 0922b430ee..52cffcaca6 100644 --- a/files/fr/web/css/color/index.md +++ b/files/fr/web/css/color/index.md @@ -95,11 +95,11 @@ La propriété `color` est définie grâce à une valeur de type {{cssxref("< En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span class="confiture"> - « MARMELADE D’ORANGES. » + « MARMELADE D’ORANGES. » </span> - Mais, à son grand regret, le pot était vide : + Mais, à son grand regret, le pot était vide : elle n’osait le laisser tomber dans la crainte - de tuer quelqu’un ; aussi s’arrangea-t-elle de + de tuer quelqu’un ; aussi s’arrangea-t-elle de manière à le déposer en passant dans une des armoires. </p> diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md index d658dfd023..55f729a490 100644 --- a/files/fr/web/css/color_value/index.md +++ b/files/fr/web/css/color_value/index.md @@ -12,7 +12,7 @@ original_slug: Web/CSS/Type_color Le type de données CSS **`<color>`** permet de représenter des couleurs dans [l'espace de couleurs sRGB](https://fr.wikipedia.org/wiki/SRGB). Une couleur pourra être décrite de trois façons : -- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) +- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) - en utilisant [le système de coordonnées cubiques RGB](https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal) (grâce à la notation #-hexadecimal ou aux notations fonctionnelles `rgb()` et `rgba()`) - en utilisant [le système de coordonnées cylindriques HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) (grâce aux notations fonctionnelles `hsl()` et `hsla()`) diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md index 71a22e246c..52528a656d 100644 --- a/files/fr/web/css/columns/index.md +++ b/files/fr/web/css/columns/index.md @@ -57,10 +57,10 @@ La propriété `columns` se définit avec un ou deux valeurs parmi celles décri ```css .exemple { - margin: 0; - height: 90px; - border: 3px solid black; - columns: 3; + margin: 0; + height: 90px; + border: 3px solid black; + columns: 3; } ``` diff --git a/files/fr/web/css/contain/index.md b/files/fr/web/css/contain/index.md index dd2b464a31..7f7cb4ca5f 100644 --- a/files/fr/web/css/contain/index.md +++ b/files/fr/web/css/contain/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/contain --- {{CSSRef}}{{SeeCompatTable}} -La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. +La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. ```css /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md index 386a998680..2587b0cff0 100644 --- a/files/fr/web/css/containing_block/index.md +++ b/files/fr/web/css/containing_block/index.md @@ -35,7 +35,7 @@ Les dimensions et la position d'un élément sont souvent dépendants du bloc en Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément : -- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). +- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). - Si la propriété `position` vaut **`absolute`**, le bloc englobant est constitué par le bord de la boîte de remplissage (_padding_) de l'ancêtre le plus proche dont la valeur de `position` est différente de `static` (`fixed`, `absolute`, `relative` ou `sticky`). - Si la propriété `position` vaut **`fixed`**, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés). - Si la propriété `position` vaut **`absolute`** ou `fixed`, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md index beaca7828e..659de2ece3 100644 --- a/files/fr/web/css/counter()/index.md +++ b/files/fr/web/css/counter()/index.md @@ -29,7 +29,7 @@ Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n' ### Valeurs - {{cssxref("<custom-ident>")}} - - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. + - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. - `<counter-style>` - : Un nom de style de compteur ou une fonction [`symbols()`](</fr/docs/Web/CSS/symbols()>). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal. - `none` @@ -63,7 +63,7 @@ li { counter-increment: listCounter; } li::after { - content: "[" counter(listCounter) "] == [" + content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; } ``` diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md index a2c2cbe72b..de8d517491 100644 --- a/files/fr/web/css/counter-set/index.md +++ b/files/fr/web/css/counter-set/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/counter-set --- {{CSSRef}} -La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. +La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. > **Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}. diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md index 96ed5b7e88..b663dfb9ed 100644 --- a/files/fr/web/css/counters()/index.md +++ b/files/fr/web/css/counters()/index.md @@ -90,7 +90,7 @@ li::marker { content: counters(listCounter, '.', upper-roman) ') '; } li::before { - content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; + content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; } ``` @@ -141,7 +141,7 @@ li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { - content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); + content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } ``` diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md index de84d1848a..1000237d2c 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md @@ -24,7 +24,7 @@ var animation = false, keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', - elem = document.createElement('div'); + elem = document.createElement('div'); if( elem.style.animationName !== undefined ) { animation = true; } @@ -43,7 +43,7 @@ if( animation === false ) { Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant `animation` avec `false`. On utilise la chaîne de caractères `animationstring` avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable `pfx` qu'on définit pour le moment avec la chaîne vide. -Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. +Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. Si le navigateur ne prend pas en charge la version sans préfixe et que `animation` vaut toujours `false`, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de `AnimationName` de la même façon. diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md index 2f3ea5c601..a8e36ee3c4 100644 --- a/files/fr/web/css/css_animations/tips/index.md +++ b/files/fr/web/css/css_animations/tips/index.md @@ -107,7 +107,7 @@ document.querySelector(".runButton").addEventListener("click", play, false); Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes : -1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. +1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. 2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement `animationiteration` se déclenche. Ces pistes sont utilisées dans la démonstration suivante : diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md index cfcdb58e26..7aeead0149 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -83,6 +83,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | -| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | +| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | +| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index 6688539186..d340b7c1de 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -11,11 +11,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- {{CSSRef}} -La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. +La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. ## Carreler une image de grande taille -Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante. +Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.  @@ -33,11 +33,11 @@ On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu : } ``` -On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. +On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. ## Étirer une image -Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. +Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. ```css background-size: 300px 150px; @@ -69,13 +69,13 @@ On remarque que la feuille de style utilisée est identique à la précédente, ## Valeurs spéciales : `contain` et `cover` -En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. +En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. ### `contain` La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur. -Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). +Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). {{EmbedLiveSample("contain", "100%", "220")}} diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md index 54bb94fdb9..e9a1c0b2a5 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -45,9 +45,9 @@ Avant l'apparition des boîtes flexibles (_flexbox_), l'alignement horizontal é ```css .container { - width: 20em; - margin-left: auto; - margin-right: auto; + width: 20em; + margin-left: auto; + margin-right: auto; } ``` diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md index 7dbf6c1104..e7a04d0a0c 100644 --- a/files/fr/web/css/css_box_model/index.md +++ b/files/fr/web/css/css_box_model/index.md @@ -40,7 +40,7 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS - {{cssxref("margin-left")}} - {{cssxref("margin-right")}} - {{cssxref("margin-top")}} -- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} +- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} #### Les propriétés qui définissent le remplissage (_padding_) d'une boîte @@ -69,5 +69,5 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName("CSS3 Box")}} | {{Spec2("CSS3 Box")}} | Added `margin-trim` | -| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | Définition initiale. | diff --git a/files/fr/web/css/css_color/index.md b/files/fr/web/css/css_color/index.md index 2ebf2f0b60..ebcaef8a8b 100644 --- a/files/fr/web/css/css_color/index.md +++ b/files/fr/web/css/css_color/index.md @@ -40,9 +40,9 @@ translation_of: Web/CSS/CSS_Color | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | -| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | -| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | +| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | +| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md index 74f2583388..8a518d5223 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md @@ -71,7 +71,7 @@ La [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) `columns` Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où `column-count` vaut 3. .container { - columns: 3; + columns: 3; } Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où `column-width` vaut `200px`. diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md index f2e6f0e060..d191290e31 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -52,7 +52,7 @@ Avec l'exemple suivant, on force une rupture avant chaque élément de titre `h2 ## Les ruptures entre les lignes -On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. +On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. Les propriétés `orphans` et `widows` prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble. diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md index e5d4cc5ffa..4e62a99372 100644 --- a/files/fr/web/css/css_columns/index.md +++ b/files/fr/web/css/css_columns/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/CSS_Columns ## Exemple simple -Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. +Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. {{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}} diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md index faf44e11f3..55695a1a37 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md @@ -34,23 +34,23 @@ On utilisera la propriété `column-count` pour définir le nombre de colonnes q ```html <div id="col"> - <p> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. - </p> - <p> - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - </p> - <p> - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - </p> - <p> - Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. + </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + </p> + <p> + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + </p> + <p> + Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> </div> ``` @@ -76,14 +76,14 @@ La propriété `column-width` permet quant à elle de définir la largeur minima ```html <div id="wid"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` @@ -111,14 +111,14 @@ Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon ```html <div id="col_short"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md index f37a4b8ca4..f2d8ef91e3 100644 --- a/files/fr/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md @@ -18,7 +18,7 @@ La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref( ### Manipuler la valeur d'un compteur -Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. +Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. ### Afficher un compteur diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md index 62be3b5fb5..7ec7f854e0 100644 --- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -139,7 +139,7 @@ La propriété {{cssxref("flex-flow")}} est [une propriété raccourcie](/fr/doc ### `order` -La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. +La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. - Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut) - [Spécification](https://drafts.csswg.org/css-flexbox/#order-property) diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md index 9ae3730f10..c35dc8ba21 100644 --- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -44,7 +44,7 @@ Avant de rentrer dans le détail des propriétés, définissons certains concept Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ? -CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). +CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est `min-content`. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur `min-content` correspond à la taille du plus grand mot du paragraphe. @@ -74,7 +74,7 @@ Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-dir ## La propriété `flex-basis` -La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). +La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). Si la taille initiale de l'élément n'est pas définie de façon absolue, `auto` correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de `min-` et `max-content`, car la boîte flexible utilisera `max-content` comme valeur pour `flex-basis`. Dans l'exemple suivant, nous verrons comment en tirer parti. @@ -152,7 +152,7 @@ Le premier, expliqué de façon subtile dans la spécification est la différenc > “Note : Le coefficient `flex-shrink` est multiplié par la taille de base (`flex-basis`) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.” -Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. +Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. On peut observer ce seuil avec `min-content` dans l'exemple qui suit où `flex-basis` est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que `min-content`. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément. @@ -174,10 +174,10 @@ Comprendre le dimensionnement des objets flexibles revient avant tout à compren ### Quelle est la taille de base de l'objet ? -1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. -2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément +1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. +2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément 3. Si `flex-basis` est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément. -4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. +4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. ### De l'espace est-il disponible ? diff --git a/files/fr/web/css/css_flexible_box_layout/index.md b/files/fr/web/css/css_flexible_box_layout/index.md index 96526e656d..f10fc12be3 100644 --- a/files/fr/web/css/css_flexible_box_layout/index.md +++ b/files/fr/web/css/css_flexible_box_layout/index.md @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout ## Exemple -Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. +Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. {{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}} diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 195322f484..8c22214d0f 100644 --- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -73,7 +73,7 @@ Cette contrainte sera levée lorsque les propriétés de gouttières seront impl La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique `visibility: collapse` (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit : -> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) +> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario. diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 87383e908a..9557dd4ecb 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -37,7 +37,7 @@ Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les l  -Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche. +Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche.  @@ -69,17 +69,17 @@ Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les vale - Premier élément selon la source : `order: 2` - Deuxième élément selon la source : `order: 3` -- Troisième élément selon la source : `order: 1` -- Quatrième élément selon la source :`order: 3` -- Cinquième élément selon la source :`order: 1` +- Troisième élément selon la source : `order: 1` +- Quatrième élément selon la source :`order: 3` +- Cinquième élément selon la source :`order: 1` Les éléments seront affichés sur la page dans l'ordre suivant : -- Troisième élément selon la source : `order: 1` -- Cinquième élément selon la source : `order: 1` -- Premier élément selon la source : `order: 2` -- Deuxième élément selon la source : `order: 3` -- Quatrième élément selon la source : `order: 3` +- Troisième élément selon la source : `order: 1` +- Cinquième élément selon la source : `order: 1` +- Premier élément selon la source : `order: 2` +- Deuxième élément selon la source : `order: 3` +- Quatrième élément selon la source : `order: 3`  diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index ea7df31530..5c802dd3a4 100644 --- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -35,7 +35,7 @@ Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille natu ### L'espace distribué au sein des éléments -On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera `flex: auto` qui correspond à la notation raccourcie de `flex: 1 1 auto` — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace. @@ -106,7 +106,7 @@ On peut également permettre aux deux côtés de grandir/rétrécir proportionne } ``` -On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). ```css .media .content { @@ -127,7 +127,7 @@ Si on souhaite échanger la position de l'image dans l'objet média pour l'affic ## Les contrôles de formulaire -Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). +Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément `<button>` et l'élément `<input>` dans un conteneur auquel on ajoute une bordure et pour lequel on a `display: flex`. On utilise ensuite les propriétés flexibles afin de permettre à l'élément `<input>` de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible. diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md index 96a22400e7..327f825130 100644 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md @@ -31,7 +31,7 @@ Au delà de l'élément racine du document (ici l'élément `html`), un nouveau - Les légendes de tableau ou les éléments avec `display: table-caption` - Les éléments de blocs pour lesquels `overflow` a une valeur différente de `visible` - `display: flow-root` -- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` +- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` - [Les élément flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox) - [Les éléments de grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base) - [Les conteneurs multi-colonnes](fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes) @@ -79,7 +79,7 @@ Dans ce guide, nous avons approfondi les notions relatives aux contextes de form ## Voir aussi -- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) +- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) - [Modèle de formatage visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle) - [Modèle de boîte CSS](/fr/docs/Web/CSS/Modèle_de_boîte_CSS) diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md index 70da8b93a5..c609aebc7f 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- {{CSSRef}} -Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. +Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations. @@ -55,7 +55,7 @@ Le crénage correspond à l'espace entre les caractères pour certaines combinai Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement. -{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. +{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. Vous pouvez modifier : @@ -130,7 +130,7 @@ Cette caractéristique permet d'accéder à différentes formes alternatives de ### Propriété raccourcie ({{Cssxref("font-variant")}}) -La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). +La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). {{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md index c8f7e28163..bddae8fabf 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md @@ -66,9 +66,9 @@ Cette propriété fut le premier mécanisme implémenté pour tester les premiè ### La graisse (_weight_) -La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. +La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. -On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : +On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : ```css font-weight: 375; @@ -138,7 +138,7 @@ Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de `font-size` mais on peut tout à fait les manipuler avec la syntaxe de bas niveau `font-variation-settings`. -Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. +Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. ```css font-optical-sizing: auto; @@ -180,7 +180,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: normal; + font-style: normal; } ``` @@ -192,7 +192,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 20deg; + font-style: oblique 0deg 20deg; } ``` @@ -206,7 +206,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: italic; + font-style: italic; } ``` @@ -218,7 +218,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 12deg; + font-style: oblique 0deg 12deg; } ``` diff --git a/files/fr/web/css/css_generated_content/index.md b/files/fr/web/css/css_generated_content/index.md index be8fda6c8a..59f85b6e9e 100644 --- a/files/fr/web/css/css_generated_content/index.md +++ b/files/fr/web/css/css_generated_content/index.md @@ -23,5 +23,5 @@ translation_of: Web/CSS/CSS_Generated_Content | Spécification | État | Commentaires | | ------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md index 119d3ec21a..860c6c8a43 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md @@ -133,13 +133,13 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de <div>Deux</div> <div>Trois</div> <div>Quatre - <br>Cette cellule - <br>a du contenu - <br>supplémentaire - <br>et max vaut auto - <br>afin que la ligne + <br>Cette cellule + <br>a du contenu + <br>supplémentaire + <br>et max vaut auto + <br>afin que la ligne <br>se développe. - </div> + </div> <div>Five</div> </div> ``` @@ -256,7 +256,7 @@ Une grille peut contenir un mélange d'éléments. Certains éléments peuvent a ### Modification de l'ordre du document -Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. +Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. ### Les éléments avec des propriétés de placement @@ -508,7 +508,7 @@ Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui s {{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}} -Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. +Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. ### Autre exemple diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md index 2ae251e3d2..d38377a622 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md @@ -14,7 +14,7 @@ Chaque méthode de disposition qui implémente cette nouvelle spécification se ## Les deux axes d'une grille -Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre. +Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.  diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md index 2bddcda1bb..19cbf7d487 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md @@ -206,7 +206,7 @@ Les requêtes de fonctionnalité ressemblent beaucoup aux [requêtes de média]( La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante. -On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. +On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md index f22c645dc6..8290c60297 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md @@ -95,7 +95,7 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement ### Mode d'écriture par défaut -Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. +Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md index aba4861212..faae69d8ab 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md @@ -87,9 +87,9 @@ Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de pl ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -151,9 +151,9 @@ Dans l'exemple précédent, toute la grille est occupée… On peut également u ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -217,9 +217,9 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n' ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -305,9 +305,9 @@ On peut ensuite redéfinir la disposition à l'intérieur des différentes _medi ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -359,9 +359,9 @@ Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` e <div class="image"></div> <div class="text"> Dans cet exemple, on peut utiliser - grid-template-areas pour échanger les + grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` @@ -410,7 +410,7 @@ Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une Dans cet exemple, on peut utiliser grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` diff --git a/files/fr/web/css/css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/index.md index 44d108bb14..c12be3bbbc 100644 --- a/files/fr/web/css/css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/index.md @@ -16,7 +16,7 @@ Comme les tableaux, la grille permet d'aligner des éléments sous forme de colo ## Un exemple simple -Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. +Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md index 645a3b0972..a4dcf27d56 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md @@ -135,7 +135,7 @@ On peut placer chacun des éléments individuellement et on peut également choi ## Les propriétés raccourcies `grid-column` et `grid-row` -On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. +On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md index 8e870e90e8..6acffcf68d 100644 --- a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -39,7 +39,7 @@ Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url() } ``` -L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). +L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). De la même manière, vous pouvez faire un effet de transition au survol : diff --git a/files/fr/web/css/css_images/index.md b/files/fr/web/css/css_images/index.md index 5641ddd5f8..6fae47de3f 100644 --- a/files/fr/web/css/css_images/index.md +++ b/files/fr/web/css/css_images/index.md @@ -54,6 +54,6 @@ translation_of: Web/CSS/CSS_Images | {{SpecName("CSS4 Images")}} | {{Spec2("CSS4 Images")}} | Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}. | | {{SpecName("CSS3 Images")}} | {{Spec2("CSS3 Images")}} | Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}} | | {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}} | Standardisation de la version préfixée avec `-webkit` pour les valeurs de fonctions de dégradé | -| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | -| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | +| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#url", "<url>")}} | {{Spec2("CSS1")}} | Définition intiale. | diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md index 80180ce972..960e22c062 100644 --- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md @@ -34,13 +34,13 @@ On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'un  -Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. +Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. -C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. +C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. ### Obtenir une double indentation -Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : +Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : ```css ul, li { @@ -53,8 +53,8 @@ Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune ind Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes : -1. Doter chaque élément `li` d'une marge gauche ; -2. Doter chaque élément `ul` d'une marge gauche ; +1. Doter chaque élément `li` d'une marge gauche ; +2. Doter chaque élément `ul` d'une marge gauche ; 3. Doter chaque élément `ul` d'un padding gauche quelconque. Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci. @@ -71,7 +71,7 @@ Comme nous pouvons le voir, les marqueurs restent attachés aux éléments `li`, ## Obtenir un rendu homogène -Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : +Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : ```css ul { @@ -80,7 +80,7 @@ ul { } ``` -Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : +Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : ```css ul { @@ -89,7 +89,7 @@ ul { } ``` -Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : +Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : ```css ul { diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md index b8d49e34f8..7de0ca1f9f 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md @@ -71,7 +71,7 @@ De nouvelles propriétés raccourcies sont également apparues et permettent de ## Exemples de marges -Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. +Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure. @@ -97,7 +97,7 @@ Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une mar ## Exemples pour le remplissage -Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. +Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture `horizontal-tb`, les deux boîtes auront la même apparence. diff --git a/files/fr/web/css/css_masking/index.md b/files/fr/web/css/css_masking/index.md index 6699d3a116..59a063413c 100644 --- a/files/fr/web/css/css_masking/index.md +++ b/files/fr/web/css/css_masking/index.md @@ -42,5 +42,5 @@ original_slug: Web/CSS/CSS_Masks | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | | {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_overflow/index.md b/files/fr/web/css/css_overflow/index.md index 1bf9216960..7134252e2d 100644 --- a/files/fr/web/css/css_overflow/index.md +++ b/files/fr/web/css/css_overflow/index.md @@ -32,9 +32,9 @@ L'exempel interactif suivant illustre comment la modification de la valeur de la - {{CSSxRef("overflow-x")}} - {{CSSxRef("overflow-y")}} - {{CSSxRef("text-overflow")}} -- {{CSSxRef("block-overflow")}} {{experimental_inline}} -- {{CSSxRef("line-clamp")}} {{experimental_inline}} -- {{CSSxRef("max-lines")}} {{experimental_inline}} +- {{CSSxRef("block-overflow")}} {{experimental_inline}} +- {{CSSxRef("line-clamp")}} {{experimental_inline}} +- {{CSSxRef("max-lines")}} {{experimental_inline}} - {{CSSxRef("continue")}} {{experimental_inline}} ### Propriétés spécifiques diff --git a/files/fr/web/css/css_pages/index.md b/files/fr/web/css/css_pages/index.md index 52e54869af..b5404c6e1f 100644 --- a/files/fr/web/css/css_pages/index.md +++ b/files/fr/web/css/css_pages/index.md @@ -35,6 +35,6 @@ translation_of: Web/CSS/CSS_Pages | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | -| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | -| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | +| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | +| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/index.md b/files/fr/web/css/css_positioning/index.md index b4ca0b565a..4ebd5e5926 100644 --- a/files/fr/web/css/css_positioning/index.md +++ b/files/fr/web/css/css_positioning/index.md @@ -34,5 +34,5 @@ translation_of: Web/CSS/CSS_Positioning | Spécification | État | Commentaires | | ---------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | -| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | +| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md index 1526b9350c..7dbe95e542 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index ## Ajouter `z-index` -Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. +Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de `z-index` est affichée par dessus toutes celles dont la valeur est inférieure à la sienne. @@ -36,7 +36,7 @@ Cette propriété, dont l'attribut est une valeur entière (positive ou négativ > - Lorsque la propriété `z-index` n'est pas définie, les éléments sont rendus sur la couche 0 par défaut. > - Si plusieurs éléments possède la même valeur de `z-index` (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans [empilement sans `z-index`](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) s'appliquent. -Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. +Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. {{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/index.md index e60cd463a0..4e8f5ed861 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.md @@ -22,12 +22,12 @@ Cela signifie que les règles de style CSS permettent de positionner des boîtes Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples. -1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut -2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants -3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut -4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches -5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau -6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments -7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau +1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut +2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants +3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut +4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches +5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau +6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments +7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau {{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index 964ea9c510..27b332db66 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -11,21 +11,21 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement : 1. L'arrière-plan et les bordures de l'élément racine du document -2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; -3. Les blocs flottants ; +2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; +3. Les blocs flottants ; 4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML). En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}. Ce comportement peut être expliqué en améliorant la liste précédente : -1. L'arrière-plan et les bordures de l'élément racine ; -2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; -3. Les blocs flottants ; -4. Les éléments « en-ligne » enfants dans le flux normal ; +1. L'arrière-plan et les bordures de l'élément racine ; +2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; +3. Les blocs flottants ; +4. Les éléments « en-ligne » enfants dans le flux normal ; 5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML). -> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). +> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). {{EmbedLiveSample("Code_source_de_lexemple", 600, 250)}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md index 2ba5b4585f..7c66e5d4e9 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md @@ -16,19 +16,19 @@ Commençons par un exemple simple, dans le contexte d'empilement racine nous avo Le seul et unique contexte d'empilement est le contexte racine. Sans `z-index`, les éléments sont empilés dans leur ordre d'apparition dans le code HTML. - + Si on assigne au bloc _DIV #2_ une valeur de `z-index` positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs. - + Si maintenant on assigne également au bloc _DIV #4_ une valeur de `z-index` positive, plus grande que celle du _DIV #2_, le bloc _DIV #4_ est rendu par dessus tous les autres, y compris par dessus le bloc _DIV #2_. - + Dans le dernier exemple, vous pouvez voir que les blocs _DIV #2_ et _DIV #4_ ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc _DIV #4_, tout en respectant le bloc _DIV #2_, peut être contrôlé avec la propriété `z-index`. Il se fait que les éléments _DIV #1_ et _DIV #3_ n'ayant pas de `z-index` défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs _DIV #2_ et _DIV #3_, appartient au contexte d'empilement de la racine. -Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : +Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md index 78b9dca877..c71f81e5bd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md @@ -16,11 +16,11 @@ Ce deuxième exemple est très simple, mais il est essentiel à la compréhensio {{ EmbedLiveSample('Exemple', '352', '270') }} -Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. +Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. -Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. +Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md index d41a4a98f4..7326f2438e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md @@ -26,21 +26,21 @@ Le menu de deuxième niveau est positionné en absolu à l'intérieur de son él Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de `z-index` et que les règles d'empilement par défaut s'appliquent. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine - Niveau #1 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #3 - … - Niveau #3 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - … - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #1 - … diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md index 9fdfb30422..3714bbbdbd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index ## Empilement sans `z-index` -Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : +Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : 1. Arrière-plans et bordures de l'élément racine 2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML) diff --git a/files/fr/web/css/css_properties_reference/index.md b/files/fr/web/css/css_properties_reference/index.md index 01e4929b82..7fb3817754 100644 --- a/files/fr/web/css/css_properties_reference/index.md +++ b/files/fr/web/css/css_properties_reference/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Properties_Reference ## Référence des propriétés CSS usuelles -Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : +Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : > **Note :** Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir [la référence CSS](/fr/docs/Web/CSS/Reference) et [les extensions CSS spécifiques à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions). diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md index 181d8097fc..d92dab4d6f 100644 --- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- {{CSSRef}} -[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). +[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). ## Principes fondamentaux diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md index 7c77728cab..f4f08d3274 100644 --- a/files/fr/web/css/css_selectors/index.md +++ b/files/fr/web/css/css_selectors/index.md @@ -30,7 +30,7 @@ original_slug: Web/CSS/Sélecteurs_CSS **Exemple :** `#toc` permettra de cibler l'élément qui possède l'identifiant `toc` (vraisemblablement défini avec un attribut `id="toc"`). - [Le sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) - : Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms. - **Syntaxe :** `*` `ns|*` `*|*` + **Syntaxe :** `*` `ns|*` `*|*` **Exemple :** `*` permettra de cibler tous les éléments du document. - [Les sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) - : Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. @@ -42,17 +42,17 @@ original_slug: Web/CSS/Sélecteurs_CSS - [Les sélecteurs de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator) - : Le combinateur `'+'` permet de sélectionner les nœuds qui suivent immédiatement un élément donné. **Syntaxe :** `A + B` - **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. + **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. - [Les sélecteurs de voisins](/fr/docs/Web/CSS/General_sibling_combinator) - : Le combinateur `'~'` permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent. **Syntaxe :** `A ~ B` **Exemple :** `p ~ span` permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent. - [Les sélecteurs d'éléments enfants](/fr/docs/Web/CSS/Child_combinator) - - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. + - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. **Syntaxe :** `A > B` **Exemple :** `ul > li` permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}. - [Les sélecteurs d'éléments descendants](/fr/docs/Web/CSS/Descendant_combinator) - - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. + - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. **Syntaxe :** `A B` **Exemple :** `div span` permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}. - [Le combinateur de colonne](/fr/docs/Web/CSS/Column_combinator){{experimental_inline}} @@ -85,7 +85,7 @@ original_slug: Web/CSS/Sélecteurs_CSS <td>{{Spec2('CSS4 Selectors')}}</td> <td> Ajout du combinateur de colonne (<code>||</code>), des sélecteurs - structurels pour la grille, des combinateurs logiques, des + structurels pour la grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index cd979bb8e2..d0cd480f9c 100644 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -10,13 +10,13 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un --- {{CSSRef}} -Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. +Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. ## Choisir une cible -La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. +La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. -Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : +Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : ```css h2:target { @@ -24,7 +24,7 @@ h2:target { } ``` -On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : +On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : ```css #Exemple:target { @@ -34,7 +34,7 @@ On peut également créer des styles particuliers pour une portion spécifique d ## Cibler tous les éléments -Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : +Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : ```css :target { @@ -44,7 +44,7 @@ Si le but est de créer un style commun qui s'appliquera à tous les éléments ## Exemple -Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. +Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. ```html <h4 id="un">...</h4> <p id="deux">...</p> @@ -59,7 +59,7 @@ Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même doc ## Conclusion -Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. +Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. ## Voir aussi diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md index 36d7003216..73aedbaaa1 100644 --- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md @@ -67,7 +67,7 @@ Pour en savoir plus, voir [le guide sur les formes et les boîtes](/fr/docs/Web/ ### Générer une forme à partir d'une image -Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). +Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). Attention, les images utilisées ainsi doivent être [compatibles avec les règles CORS](/en-US/docs/Web/HTTP/CORS). Se n'est pass le cas, `shape-outside` se comportera comme si elle avait reçu la valeur `none` et il n'y aura alors aucune forme. @@ -95,7 +95,7 @@ Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute `shape-mar ## Utiliser du contenu généré comme objet flottant -Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. +Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte. @@ -105,7 +105,7 @@ Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élé Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs. -Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. +Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. {{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} diff --git a/files/fr/web/css/css_text/index.md b/files/fr/web/css/css_text/index.md index d8056a8cc1..7381cd2933 100644 --- a/files/fr/web/css/css_text/index.md +++ b/files/fr/web/css/css_text/index.md @@ -37,6 +37,6 @@ translation_of: Web/CSS/CSS_Text | Spécification | État | Commentaires | | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------ | | {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | Actualise certaines propriétés pour être indépendant de la direction du texte. | -| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_text_decoration/index.md b/files/fr/web/css/css_text_decoration/index.md index d7f695ed7a..b21ac55ad0 100644 --- a/files/fr/web/css/css_text_decoration/index.md +++ b/files/fr/web/css/css_text_decoration/index.md @@ -36,6 +36,6 @@ translation_of: Web/CSS/CSS_Text_Decoration | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_transitions/index.md b/files/fr/web/css/css_transitions/index.md index d7fb6abc82..48f7c37130 100644 --- a/files/fr/web/css/css_transitions/index.md +++ b/files/fr/web/css/css_transitions/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Transitions --- {{CSSRef}} -Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. +Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. ## Référence @@ -24,8 +24,8 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Guides -- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) - - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) + - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. ## Spécifications @@ -35,4 +35,4 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Voir aussi -- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. +- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. diff --git a/files/fr/web/css/css_values_and_units/index.md b/files/fr/web/css/css_values_and_units/index.md index 5f15cc7d9a..c601cdd5ea 100644 --- a/files/fr/web/css/css_values_and_units/index.md +++ b/files/fr/web/css/css_values_and_units/index.md @@ -82,7 +82,7 @@ Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation foncti ```css .box { - background-image: url("images/mon-arriere-plan.png"); + background-image: url("images/mon-arriere-plan.png"); } .box { @@ -173,7 +173,7 @@ Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent le | Unité | Nom | Description | | ----- | ------------- | ----------------------- | -| `s` | Secondes | | +| `s` | Secondes | | | `ms` | Millisecondes | Un millième de seconde. | #### Unités de fréquence @@ -269,8 +269,8 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br />Ajout des - notations fonctionnelles <code>min()</code>, <code>max()</code> et - <code>clamp()</code>.<br />Ajout de <code>toggle()</code> + notations fonctionnelles <code>min()</code>, <code>max()</code> et + <code>clamp()</code>.<br />Ajout de <code>toggle()</code> </td> </tr> <tr> @@ -279,7 +279,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout de <code>calc()</code - >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code + >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code >Q</code > </td> @@ -289,13 +289,13 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS4 Colors")}}</td> <td> Ajout des syntaxes sans virgule pour les fonctions - <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et - <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et + <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et + <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br />Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br />Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la - valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code + valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code >device-cmyk()</code > et <code>color()</code>. @@ -306,7 +306,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS3 Colors")}}</td> <td> Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des - fonctions <code>rgba()</code>, <code>hsl()</code> et + fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. </td> </tr> @@ -329,7 +329,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <tr> <td>{{SpecName("CSS2.1")}}</td> <td>{{Spec2("CSS2.1")}}</td> - <td> </td> + <td></td> </tr> <tr> <td>{{SpecName("CSS1")}}</td> diff --git a/files/fr/web/css/css_writing_modes/index.md b/files/fr/web/css/css_writing_modes/index.md index 1b106f5ad6..874b88744a 100644 --- a/files/fr/web/css/css_writing_modes/index.md +++ b/files/fr/web/css/css_writing_modes/index.md @@ -27,6 +27,6 @@ translation_of: Web/CSS/CSS_Writing_Modes | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md index 2886d00fc1..e4c941fcfc 100644 --- a/files/fr/web/css/descendant_combinator/index.md +++ b/files/fr/web/css/descendant_combinator/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/Sélecteurs_descendant --- {{CSSRef("Selectors")}} -Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. +Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. ```css /* Les éléments <li> qui sont des descendants */ @@ -70,9 +70,9 @@ li li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md index 6fe130080a..4e621b5253 100644 --- a/files/fr/web/css/direction/index.md +++ b/files/fr/web/css/direction/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/direction --- {{CSSRef}} -La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. +La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. {{EmbedInteractiveExample("pages/css/direction.html")}} @@ -59,7 +59,7 @@ blockquote { ```html <blockquote> Du reste, depuis son bain dans la mare aux larmes, - tout était changé : la salle, la table de verre, et + tout était changé : la salle, la table de verre, et la petite porte avaient complétement disparu. </blockquote> ``` diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 59d50659ec..0fdc63cc1c 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -9,7 +9,7 @@ Ces mots-clés définissent si un élément génère des boîtes d'affichage ou ## Syntaxe -- `contents` {{Experimental_Inline}} +- `contents` {{Experimental_Inline}} - : L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) pour plus de détails. diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md index 298e80c95c..dd4940a7a9 100644 --- a/files/fr/web/css/display-inside/index.md +++ b/files/fr/web/css/display-inside/index.md @@ -15,7 +15,7 @@ Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l' Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : -- `flow` {{Experimental_Inline}} +- `flow` {{Experimental_Inline}} - : L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « _block and inline layout_ » en anglais). @@ -23,7 +23,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context) (BFC) pour son contenu ou intègre son contenu dans le contexte parent. -- `flow-root` {{Experimental_Inline}} +- `flow-root` {{Experimental_Inline}} - : L'élément génère un bloc qui établit un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context), définissant ainsi une nouvelle racine pour le formatage. - `table` - : L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc. @@ -31,7 +31,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout). - `grid` - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). -- `ruby` {{Experimental_Inline}} +- `ruby` {{Experimental_Inline}} - : L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}. > **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que `<display-inside>` lorsque c'est cohérent. Ainsi, avec `display: flex` ou `display: grid`, la valeur utilisée de `<display-outside>` sera nécessairement `block`. On a ainsi le résultat attendu car on doit avoir `display: grid` avec un conteneur qui soit un bloc. diff --git a/files/fr/web/css/display-internal/index.md b/files/fr/web/css/display-internal/index.md index c2c6e47a43..9bfa2daafc 100644 --- a/files/fr/web/css/display-internal/index.md +++ b/files/fr/web/css/display-internal/index.md @@ -31,13 +31,13 @@ Sauf mention contraire, le type d'affichage intérieur et extérieur sont défin - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}. - `table-caption` - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}. -- `ruby-base` {{Experimental_Inline}} +- `ruby-base` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}. -- `ruby-text` {{Experimental_Inline}} +- `ruby-text` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}. -- `ruby-base-container` {{Experimental_Inline}} +- `ruby-base-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes. -- `ruby-text-container` {{Experimental_Inline}} +- `ruby-text-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md index 3506944425..07bb6c0fcf 100644 --- a/files/fr/web/css/display-listitem/index.md +++ b/files/fr/web/css/display-listitem/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/display-listitem --- {{CSSRef}} -Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. +Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. ## Syntaxe diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md index 96e20d0c7d..404890c63f 100644 --- a/files/fr/web/css/display-outside/index.md +++ b/files/fr/web/css/display-outside/index.md @@ -29,7 +29,7 @@ Une valeur `<display-outside>` peut être l'un des mots-clés suivants. > **Note :** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. > -> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). +> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). ### Syntaxe formelle diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md index 1b106fa0c2..42bee1f745 100644 --- a/files/fr/web/css/filter-function/opacity()/index.md +++ b/files/fr/web/css/filter-function/opacity()/index.md @@ -21,7 +21,7 @@ opacity(multiplicateur) ### Paramètres - `multiplicateur` - - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. + - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. ## Exemples diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md index 9774d75c30..3943bc2629 100644 --- a/files/fr/web/css/fit-content/index.md +++ b/files/fr/web/css/fit-content/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/fit-content --- {{CSSRef}}{{SeeCompatTable}} -La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. +La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. ```css /* Valeurs de type <length> */ @@ -35,7 +35,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { - `<length>` - : Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue. - `<percentage>` - - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. + - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. ### Syntaxe formelle @@ -84,7 +84,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | +| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | | {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md index 63769f6da2..ae072a187c 100644 --- a/files/fr/web/css/flex-basis/index.md +++ b/files/fr/web/css/flex-basis/index.md @@ -54,7 +54,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content > **Note :** Voici un rapide historique pour cette propriété : > - > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » + > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » > - Ensuite, `flex-basis:auto` a été modifiée pour indiquer un dimensionnement automatique et le mot-clé `main-size` fut introduit pour faire référence à la propriété `width` ou `height`. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}. > - Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'`auto` fasse à nouveau référence à la propriété `height` ou `width`. Le mot-clé `content` a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation). diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md index aba2fa317d..2883799798 100644 --- a/files/fr/web/css/flex-direction/index.md +++ b/files/fr/web/css/flex-direction/index.md @@ -63,15 +63,15 @@ flex-direction: unset; ```html <h4>Un exemple avec column-reverse</h4> <div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> <h4>Un exemple avec row-reverse</h4> <div id="content1"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> ``` diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index a0e2170ebb..b29d872871 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -212,8 +212,8 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```html <div id="flex-container"> - <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> - <div class="raw-item" id="raw">Boîte « normale » </div> + <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> + <div class="raw-item" id="raw">Boîte « normale » </div> </div> ``` diff --git a/files/fr/web/css/flex_value/index.md b/files/fr/web/css/flex_value/index.md index 9392f894be..1c62484ed0 100644 --- a/files/fr/web/css/flex_value/index.md +++ b/files/fr/web/css/flex_value/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/flex_value --- {{CSSRef}} -Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. ## Syntaxe diff --git a/files/fr/web/css/float/index.md b/files/fr/web/css/float/index.md index 7dcc237af4..9668e3b4ba 100644 --- a/files/fr/web/css/float/index.md +++ b/files/fr/web/css/float/index.md @@ -56,7 +56,7 @@ float: unset; - `left` - : Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient. - `right` - - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. + - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. - `none` - : Un mot-clé indiquant que l'élément ne doit pas flotter - `inline-start` @@ -126,7 +126,7 @@ Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en p.avecBoitesRouges { overflow: hidden; height: auto; } ``` -> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. +> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. ## Spécifications diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md index 4b3b8cae1b..e7e30ec353 100644 --- a/files/fr/web/css/font-feature-settings/index.md +++ b/files/fr/web/css/font-feature-settings/index.md @@ -83,7 +83,7 @@ td.tabular { font-feature-settings: "tnum"; } } ``` -## Spécifications +## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md index bc3fe72aa0..5451a1b01c 100644 --- a/files/fr/web/css/font-kerning/index.md +++ b/files/fr/web/css/font-kerning/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-kerning --- {{CSSRef}} -La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. +La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. ```css font-kerning: auto; diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md index 97225330f3..81b3f23c5d 100644 --- a/files/fr/web/css/font-language-override/index.md +++ b/files/fr/web/css/font-language-override/index.md @@ -53,7 +53,7 @@ p.para1 { } p.para2 { - font-language-override: "DAN"; + font-language-override: "DAN"; } ``` diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md index 05abd409e2..29c2129e7a 100644 --- a/files/fr/web/css/font-optical-sizing/index.md +++ b/files/fr/web/css/font-optical-sizing/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-optical-sizing --- {{CSSRef}} -La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. +La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (_serifs_) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais. @@ -77,7 +77,7 @@ p { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | +| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | {{cssinfo}} diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md index 0512e7882f..17fc0c2872 100644 --- a/files/fr/web/css/font-size/index.md +++ b/files/fr/web/css/font-size/index.md @@ -56,9 +56,9 @@ La propriété `font-size` peut être définie de deux façons : - `larger, smaller` - : La taille de la fonte est plus grande (`larger`) ou plus petite (`smaller`) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant. - `<length>` - - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. + - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. - `<percentage>` - - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. + - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. > **Note :** Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur. @@ -80,7 +80,7 @@ L'utilisation des pixels (`px`) permet d'obtenir un résultat statique, absolu e ### Les ems -On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. +On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. Pour calculer une équivalence entre `em` et un résultat exprimé en pixels, on peut utiliser cette formule : @@ -119,7 +119,7 @@ On obtiendra le résultat suivant : {{EmbedLiveSample("Les_ems", 400, 40)}} -Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. +Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. ### Les rems diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md index 78b9d97af8..b88604ffac 100644 --- a/files/fr/web/css/font-variant-position/index.md +++ b/files/fr/web/css/font-variant-position/index.md @@ -60,7 +60,7 @@ La valeur de cette propriété est définie grâce à l'un des mots-clés défin ```html <p> Alice <span class="exemple">ne s’était pas fait le moindre mal.</span> - Vite elle se remet sur ses pieds et regarde en l’air ; mais tout + Vite elle se remet sur ses pieds et regarde en l’air ; mais tout est noir là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à toutes jambes. </p> diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md index 15ddc96075..3e02aa4788 100644 --- a/files/fr/web/css/font/index.md +++ b/files/fr/web/css/font/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/font La propriété **`font`** est : -- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} +- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} - ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques. {{EmbedInteractiveExample("pages/css/font.html")}} @@ -67,7 +67,7 @@ Si `font` est définie comme une propriété raccourcie : - Les valeurs pour `font-style`, `font-variant` et `font-weight` doivent précéder la valeur pour `font-size` - La valeur de `font-variant` ne peut utiliser que les valeurs définies en CSS 2.1 : `normal` et `small-caps` - La valeur de `font-stretch` ne peut être qu'un mot-clé. -- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") +- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") - La valeur pour `font-family` doit être la dernière fournie. ### Valeurs @@ -140,7 +140,7 @@ Si `font` est définie comme une propriété raccourcie : ### CSS ```css -/* La corps de la police sera 12px */ +/* La corps de la police sera 12px */ /* La hauteur de ligne 14px et la */ /* famille de polices sans-serif */ diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md index 821fa8e2da..11118681ce 100644 --- a/files/fr/web/css/forced-color-adjust/index.md +++ b/files/fr/web/css/forced-color-adjust/index.md @@ -74,11 +74,11 @@ En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media ```html <div class="box"> - <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> + <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> </div> <div class="box forced"> - <p>Voici une boîte qui conservera les couleurs définies par le site.</p> + <p>Voici une boîte qui conservera les couleurs définies par le site.</p> </div> ``` diff --git a/files/fr/web/css/frequency-percentage/index.md b/files/fr/web/css/frequency-percentage/index.md index 4b3f9f032d..2fa40a4e7a 100644 --- a/files/fr/web/css/frequency-percentage/index.md +++ b/files/fr/web/css/frequency-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<frequency-percentage>` peut être utilisée dans une | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<frequency-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md index c32f3caf0b..7889def802 100644 --- a/files/fr/web/css/gradient/linear-gradient()/index.md +++ b/files/fr/web/css/gradient/linear-gradient()/index.md @@ -75,7 +75,7 @@ Un dégradé linéaire est défini par un axe : la _ligne du dégradé_ et La ligne du dégradé est définie par le centre de la boîte contenant l'image et par un angle. Les couleurs du dégradé sont déterminées par deux ou plusieurs points : le point de départ, le point d'arrivée et, éventuellement entre, des points d'arrêts de couleur. -Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. +Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. #### Personnaliser des dégradés diff --git a/files/fr/web/css/grid-area/index.md b/files/fr/web/css/grid-area/index.md index 58950b4c06..cfea297802 100644 --- a/files/fr/web/css/grid-area/index.md +++ b/files/fr/web/css/grid-area/index.md @@ -19,7 +19,7 @@ Lorsqu'il n'y a pas de valeur pour `grid-column-end`, si `grid-column-start` est Lorsqu'il n'y a pas de valeur pour `grid-row-end`, si `grid-row-start` est un identifiant de zone, `grid-row-end` sera défini avec cet identifiant, sinon il sera défini avec `auto`. -Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. +Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. La propriété `grid-area` peut également prendre comme valeur un identifiant personnalisé ({{cssxref("<custom-ident>")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}. diff --git a/files/fr/web/css/grid-auto-columns/index.md b/files/fr/web/css/grid-auto-columns/index.md index 2456688ecb..5ecffb429a 100644 --- a/files/fr/web/css/grid-auto-columns/index.md +++ b/files/fr/web/css/grid-auto-columns/index.md @@ -52,9 +52,9 @@ grid-auto-columns: fit-content(20%); /* Gestion de plusieurs pistes */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; -grid-auto-columns: 10% 33.3%; +grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; -grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* Valeurs globales */ @@ -85,7 +85,7 @@ grid-auto-columns: unset; - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée de façon semblable à `auto`, sauf qu'ici, la taille de la piste est écrétée à _argument_ s'i elle est plus grande que le minimum `auto`. - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -115,9 +115,9 @@ grid-auto-columns: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md index 3e14e8cc58..f3eee3cc0c 100644 --- a/files/fr/web/css/grid-auto-flow/index.md +++ b/files/fr/web/css/grid-auto-flow/index.md @@ -91,15 +91,15 @@ Cette propriété peut prendre deux formes : ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> - <div id="item4"></div> - <div id="item5"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> </div> <select id="direction" onchange="changeGridAutoFlow()"> - <option value="column">column</option> - <option value="row">row</option> + <option value="column">column</option> + <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changeGridAutoFlow()"> <label for="dense">dense</label> diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md index aa3ec3e501..b3de100bd7 100644 --- a/files/fr/web/css/grid-auto-rows/index.md +++ b/files/fr/web/css/grid-auto-rows/index.md @@ -46,9 +46,9 @@ grid-auto-rows: minmax(20%, 80vmax); /* Gestion de plusieurs pistes */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; -grid-auto-rows: 10% 33.3%; +grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; -grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); @@ -78,7 +78,7 @@ grid-auto-rows: unset; - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal). - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -108,9 +108,9 @@ grid-auto-rows: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md index b650f7110c..d1953ae90d 100644 --- a/files/fr/web/css/grid-column-end/index.md +++ b/files/fr/web/css/grid-column-end/index.md @@ -47,7 +47,7 @@ grid-column-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, `grid-column-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). - `<integer> && <custom-ident>?` diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md index 375de17056..b05d4b4f9a 100644 --- a/files/fr/web/css/grid-row-end/index.md +++ b/files/fr/web/css/grid-row-end/index.md @@ -47,7 +47,7 @@ grid-row-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, `grid-row-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). ` <custom-ident``> ` ne peut pas prendre la valeur `span`. diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md index dfca09d8a0..3c0a67c57b 100644 --- a/files/fr/web/css/grid-template-areas/index.md +++ b/files/fr/web/css/grid-template-areas/index.md @@ -65,8 +65,8 @@ grid-template-areas: unset; width: 100%; height: 250px; grid-template-areas: "head head" - "nav main" - "nav foot"; + "nav main" + "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md index 24be99d5ae..cab6a41013 100644 --- a/files/fr/web/css/grid-template/index.md +++ b/files/fr/web/css/grid-template/index.md @@ -70,8 +70,8 @@ grid-template: unset; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] - [main-left] "nav main" 1fr [main-right] - [footer-left] "nav foot" 30px [footer-right] + [main-left] "nav main" 1fr [main-right] + [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md index 0e63df781f..0a689da27f 100644 --- a/files/fr/web/css/height/index.md +++ b/files/fr/web/css/height/index.md @@ -44,19 +44,19 @@ height: unset; - : La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant. - `border-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément. -- `content-box` {{experimental_inline}} +- `content-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément - `auto` - : Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé. - `fill` {{experimental_inline}} - : Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture. -- `max-content` {{experimental_inline}} +- `max-content` {{experimental_inline}} - : La hauteur intrinsèque préférrée. -- `min-content` {{experimental_inline}} +- `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. -- `available` {{experimental_inline}} +- `available` {{experimental_inline}} - : La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (_padding_) vertical. -- `fit-content` {{experimental_inline}} +- `fit-content` {{experimental_inline}} - : La plus grande des valeurs entre : diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md index 63096c058a..ba6922128f 100644 --- a/files/fr/web/css/id_selectors/index.md +++ b/files/fr/web/css/id_selectors/index.md @@ -53,9 +53,9 @@ Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de ci | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | -| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | +| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | {{Spec2("CSS1")}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md index d9f3ad85f8..521425ff54 100644 --- a/files/fr/web/css/index.md +++ b/files/fr/web/css/index.md @@ -25,12 +25,12 @@ CSS est l'un des langages principaux du **Web ouvert** et a été standardisé [ ## Tutoriels -La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. +La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. - [Introduction à CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics) - : Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS. - [Mettre en forme le texte](/fr/docs/Learn/CSS/Styling_text) - - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. + - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. - [Mettre en forme les boîtes](/fr/docs/Learn/CSS/Styling_boxes) - : Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes. - [La disposition en CSS](/fr/docs/Learn/CSS/CSS_layout) @@ -47,7 +47,7 @@ La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules q - [la syntaxe et les formes du langage](/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured) - [la spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) et [l'héritage](/fr/docs/Web/CSS/inheritance) - [les unités et valeurs CSS](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) - - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) + - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) - [le bloc conteneur](/fr/docs/Web/CSS/All_About_The_Containing_Block) - [l'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) et [le contexte de formatage de blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context) - les concepts de [valeur initiale](/fr/docs/Web/CSS/initial_value), [valeur calculée](/fr/docs/Web/CSS/computed_value), [valeur utilisée](/fr/docs/Web/CSS/used_value) et [valeur réelle](/fr/docs/Web/CSS/actual_value) diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 4e1d5e1331..494780af56 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -16,13 +16,13 @@ Pour [chaque propriété CSS](fr/R%c3%a9f%c3%a9rence_CSS), la spécification ind Lorsqu'aucune valeur n'est spécifiée pour une _propriété héritée_ sur un élément, l'élément récupère la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) donnée via la spécification. -Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : +Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : ```css p { color: green; } ``` -Sur le fragment HTML suivant : +Sur le fragment HTML suivant : ```html <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p> @@ -32,13 +32,13 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_héritées")}} -Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). +Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). ## Propriétés non héritées Lorsqu'aucune valeur n'est définie pour un élément, pour une _propriété non héritée_, l'élément prendra [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de cette propriété (telle qu'indiquée par la spécification). -Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : +Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : ```css p { border: medium solid; } @@ -54,7 +54,7 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_non_héritées")}} -Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). +Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). ## Notes diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md index b764aba02a..454e9055ac 100644 --- a/files/fr/web/css/initial-letter-align/index.md +++ b/files/fr/web/css/initial-letter-align/index.md @@ -66,12 +66,12 @@ La valeur de cette propriété peut être l'un des mots-clés parmi ceux défini ```html <p class="exemple"> - Tombe, tombe, tombe ! « Cette chute n’en finira - donc pas ! Je suis curieuse de savoir combien de - milles j’ai déjà faits, » dit-elle tout haut. « Je + Tombe, tombe, tombe ! « Cette chute n’en finira + donc pas ! Je suis curieuse de savoir combien de + milles j’ai déjà faits, » dit-elle tout haut. « Je dois être bien près du centre de la terre. Voyons donc, cela serait à quatre mille milles de profondeur, - il me semble. » </p> + il me semble. » </p> ``` ### Résultat diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md index 4888679849..53a2494a7c 100644 --- a/files/fr/web/css/initial-letter/index.md +++ b/files/fr/web/css/initial-letter/index.md @@ -61,7 +61,7 @@ La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<n ```html <p class="exemple"> - Un grand rosier se trouvait à l’entrée du jardin ; + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il portait étaient blanches, mais trois jardiniers étaient en train de les peindre en rouge. </p> diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md index 4fbaf7f596..9bd02dc5ca 100644 --- a/files/fr/web/css/initial/index.md +++ b/files/fr/web/css/initial/index.md @@ -43,7 +43,7 @@ La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de ce texte est avec la couleur initiale (noire) </em> ce texte est rouge aussi - </p> + </p> ``` ### Résultat diff --git a/files/fr/web/css/initial_value/index.md b/files/fr/web/css/initial_value/index.md index 83bed2e8e6..90089dae25 100644 --- a/files/fr/web/css/initial_value/index.md +++ b/files/fr/web/css/initial_value/index.md @@ -20,7 +20,7 @@ Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | --------------------- | -| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | +| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | | {{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}} | {{Spec2("CSS2.1")}} | Définition implicite. | ## Voir aussi diff --git a/files/fr/web/css/inset-block-end/index.md b/files/fr/web/css/inset-block-end/index.md index b25e191d87..4c0a30468d 100644 --- a/files/fr/web/css/inset-block-end/index.md +++ b/files/fr/web/css/inset-block-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-end`. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block-start/index.md b/files/fr/web/css/inset-block-start/index.md index bc2066dafc..53a98c0daf 100644 --- a/files/fr/web/css/inset-block-start/index.md +++ b/files/fr/web/css/inset-block-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block/index.md b/files/fr/web/css/inset-block/index.md index c545bea997..3721212dd2 100644 --- a/files/fr/web/css/inset-block/index.md +++ b/files/fr/web/css/inset-block/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/inset-inline-end/index.md b/files/fr/web/css/inset-inline-end/index.md index 2371e342bf..81114a78d2 100644 --- a/files/fr/web/css/inset-inline-end/index.md +++ b/files/fr/web/css/inset-inline-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-end`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline-start/index.md b/files/fr/web/css/inset-inline-start/index.md index a9b9356153..b36a505100 100644 --- a/files/fr/web/css/inset-inline-start/index.md +++ b/files/fr/web/css/inset-inline-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline/index.md b/files/fr/web/css/inset-inline/index.md index bd8758ada6..5344c43652 100644 --- a/files/fr/web/css/inset-inline/index.md +++ b/files/fr/web/css/inset-inline/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/integer/index.md b/files/fr/web/css/integer/index.md index 6b35f764da..4dad5413a0 100644 --- a/files/fr/web/css/integer/index.md +++ b/files/fr/web/css/integer/index.md @@ -61,6 +61,6 @@ _5 Les caractères spéciaux ne sont pas acceptés {{Compat("css.types.integer")}} -## Voir aussi +## Voir aussi - {{cssxref("<number>")}} diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md index df078f89d1..2bddc10ac3 100644 --- a/files/fr/web/css/isolation/index.md +++ b/files/fr/web/css/isolation/index.md @@ -73,12 +73,12 @@ La propriété `isolation` est définie avec l'un des mots-clés suivants. ```html <div id="b" class="a"> - <div id="d"> - <div class="a c">auto</div> - </div> + <div id="d"> + <div class="a c">auto</div> + </div> <div id="e"> - <div class="a c">isolate</div> - </div> + <div class="a c">isolate</div> + </div> </div> ``` diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md index 9bace72a4f..e46a4340a8 100644 --- a/files/fr/web/css/justify-self/index.md +++ b/files/fr/web/css/justify-self/index.md @@ -79,7 +79,7 @@ Cette propriété peut être définie selon trois formes différentes : - `start` - : L'élément est aligné vers le début du conteneur pour l'axe en ligne. - `end` - - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. + - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. - `flex-start` - : L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`. @@ -87,7 +87,7 @@ Cette propriété peut être définie selon trois formes différentes : - : L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`. - `self-start` - - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. + - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. - `self-end` - : L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne. - `center` @@ -95,7 +95,7 @@ Cette propriété peut être définie selon trois formes différentes : - `left` - : L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne. - `right` - - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. + - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. - `baseline first baseline` `last baseline` - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md index eea4811054..2ab2bb1c52 100644 --- a/files/fr/web/css/layout_cookbook/card/index.md +++ b/files/fr/web/css/layout_cookbook/card/index.md @@ -72,5 +72,5 @@ Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en ## Voir aussi -- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} +- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} - [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/) diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md index 13c7c36aa0..88190e59f1 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.md +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md @@ -13,13 +13,13 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- {{CSSRef}} -Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_. +Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_.  ## Spécifications sommaires -Centrer un élément à la fois horizontalement et verticalement dans un autre élément. +Centrer un élément à la fois horizontalement et verticalement dans un autre élément. ## Recette @@ -31,10 +31,10 @@ Centrer un élément à la fois horizontalement et verticalement dans un autre Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`. -Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. +Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. -À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. -Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. +À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. +Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.md b/files/fr/web/css/layout_cookbook/column_layouts/index.md index a6c52ced06..8daedbc5b0 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.md +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.md @@ -54,7 +54,7 @@ Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en col > **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html) -Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. +Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}} diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md index 769108c896..5fe179b381 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md @@ -31,7 +31,7 @@ _Il faut modifier le lien pour cibler la version téléchargeable de votre exemp ## Choix effectués -_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ +_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ ## Méthodes de recours ou alternatives diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index 62d542e3ef..8825c24ab8 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -55,7 +55,7 @@ Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les élém Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe `preview` puis dans l'élément `textarea` `playable-html`. -Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. +Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) qui est utilisé sur la page [Comment centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element). diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index 9a7a809a9d..3ba09e0f5f 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -21,7 +21,7 @@ Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fr | [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | | [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index 07f6e5ee37..a531196b4d 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -38,11 +38,11 @@ Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implément ```css .pagination { - list-style: none; - margin: 0; - padding: 0; - display: flex; - column-gap: 2px; + list-style: none; + margin: 0; + padding: 0; + display: flex; + column-gap: 2px; } ``` diff --git a/files/fr/web/css/line-height-step/index.md b/files/fr/web/css/line-height-step/index.md index 83db5a0e6f..531843f6ab 100644 --- a/files/fr/web/css/line-height-step/index.md +++ b/files/fr/web/css/line-height-step/index.md @@ -36,13 +36,13 @@ Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraph ```css :root { - font-size: 12pt; - --my-grid: 18pt; - line-height-step: var(--my-grid); + font-size: 12pt; + --my-grid: 18pt; + line-height-step: var(--my-grid); } h1 { - font-size: 20pt; - margin-top: calc(2 * var(--my-grid)); + font-size: 20pt; + margin-top: calc(2 * var(--my-grid)); } ``` diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md index 8282f70b7f..69adec2fa3 100644 --- a/files/fr/web/css/line-height/index.md +++ b/files/fr/web/css/line-height/index.md @@ -52,7 +52,7 @@ La propriété `line-height` peut être définie grâce : ### Valeurs - `normal` - - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. + - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. - `<number>` - : La valeur utilisée est **sans unité** (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec `<number>`. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir `line-height` et éviter les effets de l'héritage. - `<length>` @@ -75,7 +75,7 @@ La propriété `line-height` peut être définie grâce : div { line-height: 1.2; font-size: 10pt } /* number */ div { line-height: 1.2em; font-size: 10pt } /* length */ div { line-height: 120%; font-size: 10pt } /* percentage */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } +div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } ``` ### Notes diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md index 4729fd9213..55eda0fd63 100644 --- a/files/fr/web/css/margin-block-end/index.md +++ b/files/fr/web/css/margin-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément. diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md index 4dc2eea34d..91e9cc9344 100644 --- a/files/fr/web/css/margin-block-start/index.md +++ b/files/fr/web/css/margin-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-start.html")}} diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index 0e5ed13c26..8815879177 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md index bbe3597bf1..3f53da9a6a 100644 --- a/files/fr/web/css/margin-inline-end/index.md +++ b/files/fr/web/css/margin-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-end.html")}} diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md index f457427a1c..338eea724d 100644 --- a/files/fr/web/css/margin-inline-start/index.md +++ b/files/fr/web/css/margin-inline-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-start.html")}} diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md index 9a374a5564..25a58195fb 100644 --- a/files/fr/web/css/margin-inline/index.md +++ b/files/fr/web/css/margin-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index e80263ac29..cdf9dce017 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -164,13 +164,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index 7bf9c09f0e..100ce0fa9a 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -162,13 +162,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index d59ed50cf2..d8647fbf8a 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -71,13 +71,13 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```css .ex1 { - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; } .ex2 { - margin: 20px 0px 0 -20px; - background: gold; + margin: 20px 0px 0 -20px; + background: gold; width: 66%; } ``` @@ -86,14 +86,14 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```html <div class="ex1"> - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; </div> <div class="ex2"> - margin: 20px 0px 0px -20px; - background: gold; - width: 66%; + margin: 20px 0px 0px -20px; + background: gold; + width: 66%; </div> ``` diff --git a/files/fr/web/css/mask-border-slice/index.md b/files/fr/web/css/mask-border-slice/index.md index 9809d2497f..8bc2240b08 100644 --- a/files/fr/web/css/mask-border-slice/index.md +++ b/files/fr/web/css/mask-border-slice/index.md @@ -22,7 +22,7 @@ Le diagramme ci-avant illustre l'emplacement de chaque région. - Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être [répétées, redimensionnées, ou modifiées](/fr/docs/Web/CSS/mask-border-repeat) afin que le masque de bordule final aient les mêmes dimensions que l'élément. - La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé. -Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. +Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. ## Syntaxe diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md index 3b86121fda..80e7d2e677 100644 --- a/files/fr/web/css/mask/index.md +++ b/files/fr/web/css/mask/index.md @@ -78,7 +78,7 @@ mask: unset; ```css .exemple{ - mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; + mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; } ``` diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md index 6e20a91a3a..b93c839434 100644 --- a/files/fr/web/css/max-height/index.md +++ b/files/fr/web/css/max-height/index.md @@ -52,7 +52,7 @@ max-height: unset; - `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. - `fill-available`{{experimental_inline}} - - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. + - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. - `fit-content` {{experimental_inline}} - : Un synonyme pour `max-content`. @@ -66,10 +66,10 @@ max-height: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index 330c750484..79273a5def 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -66,10 +66,10 @@ max-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/media_queries/index.md b/files/fr/web/css/media_queries/index.md index b53dfe7249..352384133b 100644 --- a/files/fr/web/css/media_queries/index.md +++ b/files/fr/web/css/media_queries/index.md @@ -39,10 +39,10 @@ Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/d | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | -| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | -| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | -| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | +| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | +| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | +| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | | {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.md b/files/fr/web/css/media_queries/testing_media_queries/index.md index 072c3e63c5..c407a9a6bf 100644 --- a/files/fr/web/css/media_queries/testing_media_queries/index.md +++ b/files/fr/web/css/media_queries/testing_media_queries/index.md @@ -61,7 +61,7 @@ function handleOrientationChange(mql) { ## Terminer la réception des notifications -Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : +Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : ```js mql.removeListener(handleOrientationChange); diff --git a/files/fr/web/css/min-block-size/index.md b/files/fr/web/css/min-block-size/index.md index 3ce41af49e..ececdb5ae2 100644 --- a/files/fr/web/css/min-block-size/index.md +++ b/files/fr/web/css/min-block-size/index.md @@ -14,7 +14,7 @@ La propriété **`min-block-size`** définit la taille minimale horizontale ou v {{EmbedInteractiveExample("pages/css/min-block-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. +Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. ## Syntaxe diff --git a/files/fr/web/css/min-inline-size/index.md b/files/fr/web/css/min-inline-size/index.md index 3b7bc6590d..013d1656c8 100644 --- a/files/fr/web/css/min-inline-size/index.md +++ b/files/fr/web/css/min-inline-size/index.md @@ -15,7 +15,7 @@ La propriété **`min-inline-size`** définit la taille minimale horizontale ou {{EmbedInteractiveExample("pages/css/min-inline-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. +Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. ## Syntaxe diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md index b2b29ec525..f87bbbec5f 100644 --- a/files/fr/web/css/min-width/index.md +++ b/files/fr/web/css/min-width/index.md @@ -65,10 +65,10 @@ min-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + </p> </div> ``` diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md index 6338de06f9..ecf9e8b56a 100644 --- a/files/fr/web/css/offset-position/index.md +++ b/files/fr/web/css/offset-position/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/offset-position --- {{CSSRef}}{{seecompattable}} -La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. ## Syntax @@ -43,7 +43,7 @@ offset-position: unset; - `auto` - : La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}. - `<position>` - - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. + - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. ## Définition formelle diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 1f6f054b5f..ca25297b2b 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -125,7 +125,7 @@ img.opacity:hover { Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision. -Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). +Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). - [Vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md index 1c00e89369..b34c47a7ad 100644 --- a/files/fr/web/css/order/index.md +++ b/files/fr/web/css/order/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/order --- {{CSSRef}} -La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. +La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. {{EmbedInteractiveExample("pages/css/order.html")}} diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index 74e13e5780..cc4800266f 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -62,9 +62,9 @@ La propriété `outline-color` est définie avec une des valeurs listées ci-apr ```css .exemple { - /* Tout d'abord on utiliser outline */ + /* Tout d'abord on utiliser outline */ /* pour définir le contour */ - outline: 2px solid; + outline: 2px solid; /* Ensuite on précise sa couleur avec */ /* outline-color */ diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 25c76f72da..1b59d4c6ed 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -117,7 +117,7 @@ Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le st - {{cssxref(":focus")}} - [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) -- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) +- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) ## Spécifications diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index ea37884c8f..856b706b44 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -35,7 +35,7 @@ Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la pr ```css body { - overflow-anchor: none; + overflow-anchor: none; } ``` @@ -43,7 +43,7 @@ Pour désactiver cette fonctionnalité sur une certaine partie du document, on c ```css .container { - overflow-anchor: none; + overflow-anchor: none; } ``` diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md index 5d6a858d0f..9a46f393db 100644 --- a/files/fr/web/css/overflow-block/index.md +++ b/files/fr/web/css/overflow-block/index.md @@ -104,7 +104,7 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md index 645ef86b07..6b591d8042 100644 --- a/files/fr/web/css/overflow-inline/index.md +++ b/files/fr/web/css/overflow-inline/index.md @@ -104,7 +104,7 @@ La propriété `overflow-inline` se définit avec un mot-clé parmi ceux de la l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index 3339efb978..21f7847642 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -70,7 +70,7 @@ p { } .hyphens { - -webkit-hyphens: auto; + -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md index 8dc2978616..2c2e8127e5 100644 --- a/files/fr/web/css/overflow-x/index.md +++ b/files/fr/web/css/overflow-x/index.md @@ -113,7 +113,7 @@ La propriété `overflow-x` est définie avec l'un des mots-clés définis ci-ap | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md index b4aa6b9e1c..6cd79717f8 100644 --- a/files/fr/web/css/overflow-y/index.md +++ b/files/fr/web/css/overflow-y/index.md @@ -117,7 +117,7 @@ La propriété `overflow-y` est définie avec un des mots-clés définis ci-apr | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 26f0aee259..ef7313308e 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -11,7 +11,7 @@ La propriété CSS **`overflow`** est une [propriété raccourcie](/fr/docs/Web/ Lorsqu'on utilise la propriété `overflow` avec une autre valeur que `visible` (la valeur par défaut), cela entraîne la création [d'un nouveau contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context). Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée -Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` +Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` > **Note :** Si on définit un axe avec `visible` (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (`visible`) sera considérée comme `auto`. diff --git a/files/fr/web/css/overscroll-behavior-x/index.md b/files/fr/web/css/overscroll-behavior-x/index.md index 9b826e5fc1..7fc4fbdf01 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.md +++ b/files/fr/web/css/overscroll-behavior-x/index.md @@ -65,7 +65,7 @@ main > div { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior-y/index.md b/files/fr/web/css/overscroll-behavior-y/index.md index d0b61a6242..ea4cdaf7eb 100644 --- a/files/fr/web/css/overscroll-behavior-y/index.md +++ b/files/fr/web/css/overscroll-behavior-y/index.md @@ -53,13 +53,13 @@ La propriété `overscroll-behavior-x` est définie avec un des mots-clés défi } ``` -Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. +Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. ## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior/index.md b/files/fr/web/css/overscroll-behavior/index.md index 16e2cc1003..8056f3384e 100644 --- a/files/fr/web/css/overscroll-behavior/index.md +++ b/files/fr/web/css/overscroll-behavior/index.md @@ -81,7 +81,7 @@ Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est cons | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------ | -| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | +| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md index 46d4e35eac..a4f5c71ef6 100644 --- a/files/fr/web/css/padding-block-end/index.md +++ b/files/fr/web/css/padding-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md index f9be8d7d0c..24d0594623 100644 --- a/files/fr/web/css/padding-block-start/index.md +++ b/files/fr/web/css/padding-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index cb96016492..83dc9d4598 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md index 5e11b47f70..d1538c3310 100644 --- a/files/fr/web/css/padding-inline-end/index.md +++ b/files/fr/web/css/padding-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}. diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md index 136ee341a6..c9c830559e 100644 --- a/files/fr/web/css/padding-inline/index.md +++ b/files/fr/web/css/padding-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md index 3116605b51..282bd3ef25 100644 --- a/files/fr/web/css/padding-left/index.md +++ b/files/fr/web/css/padding-left/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-left --- {{CSSRef}} -La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-left.html")}} diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md index d28a0c6494..49333223b0 100644 --- a/files/fr/web/css/padding-right/index.md +++ b/files/fr/web/css/padding-right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-right --- {{CSSRef}} -La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-right.html")}} diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md index cfc0fcd2c1..fb6b5f61a6 100644 --- a/files/fr/web/css/path()/index.md +++ b/files/fr/web/css/path()/index.md @@ -10,7 +10,7 @@ La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()` ## Syntaxe ```css -path( [[<'fill-rule'>,]?<string>) +path( [[<'fill-rule'>,]?<string>) ``` ### Paramètres diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md index 26a72c66ee..4566cac26b 100644 --- a/files/fr/web/css/perspective/index.md +++ b/files/fr/web/css/perspective/index.md @@ -14,7 +14,7 @@ La propriété **`perspective`** détermine la distance entre le plan d'équatio {{EmbedInteractiveExample("pages/css/perspective.html")}} -Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. +Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}. @@ -138,7 +138,7 @@ perspective: unset; perspective: 500px; } .pers650 { - perspective: 650px; + perspective: 650px; } /* On définit le div pour le conteneur, */ diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 8b658a4163..2510d39bca 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -115,12 +115,12 @@ div > div { ```html <div id="container"> - <div class="small">Lorem</div> - <div class="small">Lorem<br/>ipsum</div> - <div class="large">Lorem</div> - <div class="large">Lorem<br/>impsum</div> - <div class="large"></div> - <div class="large"></div> + <div class="small">Lorem</div> + <div class="small">Lorem<br/>ipsum</div> + <div class="large">Lorem</div> + <div class="large">Lorem<br/>impsum</div> + <div class="large"></div> + <div class="large"></div> </div> ``` @@ -151,7 +151,7 @@ div > div { <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> </select> -<select id="justifyContentAlignment"> +<select id="justifyContentAlignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index 33a3d4b4d5..c2b1d82d0f 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -183,26 +183,26 @@ select { <div class="row"> <label for="values">place-items: </label> <select id="values"> - <option value="start">start</option> - <option value="center">center</option> - <option value="end">end</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="auto center">auto center</option> - <option value="normal start">normal start</option> - <option value="center normal">center normal</option> - <option value="start auto">start auto</option> - <option value="end normal">end normal</option> - <option value="self-start auto">self-start auto</option> - <option value="self-end normal">self-end normal</option> - <option value="flex-start auto">flex-start auto</option> - <option value="flex-end normal">flex-end normal</option> - <option value="left auto">left auto</option> - <option value="right normal">right normal</option> - <option value="baseline normal">baseline normal</option> - <option value="first baseline auto">first baseline auto</option> - <option value="last baseline normal">last baseline normal</option> - <option value="stretch auto">stretch auto</option> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> </select> </div> ``` diff --git a/files/fr/web/css/place-self/index.md b/files/fr/web/css/place-self/index.md index 0e96a5452e..7dff47e681 100644 --- a/files/fr/web/css/place-self/index.md +++ b/files/fr/web/css/place-self/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/place-self --- {{CSSRef}} -La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. +La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. {{EmbedInteractiveExample("pages/css/place-self.html")}} diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md index 1c844c04d1..079577412f 100644 --- a/files/fr/web/css/pseudo-classes/index.md +++ b/files/fr/web/css/pseudo-classes/index.md @@ -92,7 +92,7 @@ Les pseudo-classes permettent d'appliquer un style à un élément non seulement - {{CSSxRef(":user-invalid")}} {{Experimental_Inline}} - {{CSSxRef(":valid")}} - {{CSSxRef(":visited")}} -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} ## Exemples @@ -113,19 +113,19 @@ p:nth-child(2n+1) { ```html <div> <p class="survol"> - La Reine devint pourpre de colère ; et après + La Reine devint pourpre de colère ; et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une bête fauve, elle - se mit à crier : « Qu’on lui coupe la tête ! » + se mit à crier : « Qu’on lui coupe la tête ! » </p> <p> - « Quelle idée ! » dit Alice très-haut et d’un + « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La Reine se tut. </p> <p> Le Roi lui posa la main sur le bras, et lui - dit timidement : « Considérez donc, ma chère - amie, que ce n’est qu’une enfant. » + dit timidement : « Considérez donc, ma chère + amie, que ce n’est qu’une enfant. » </p> </div> ``` @@ -174,7 +174,7 @@ p:nth-child(2n+1) { </p> <p> Changement afin que <code>:empty</code> se comporte comme - {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. + {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. </p> <p> Aucune modification significative pour les pseudo-classes définies @@ -222,7 +222,7 @@ p:nth-child(2n+1) { <td> Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br />Aucune modification - significative pour les pseudo-classes définies avec + significative pour les pseudo-classes définies avec {{SpecName('CSS1')}}. </td> </tr> diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md index 02fcdbb876..7036eaf34f 100644 --- a/files/fr/web/css/quotes/index.md +++ b/files/fr/web/css/quotes/index.md @@ -73,7 +73,7 @@ q { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}} | {{Spec2('CSS2.1')}} | Définition initiale | {{cssinfo}} diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md index cc926f417f..8a58889b12 100644 --- a/files/fr/web/css/ratio/index.md +++ b/files/fr/web/css/ratio/index.md @@ -25,7 +25,7 @@ Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref ### Ratios fréquemment utilisés -| | Ratio | Utilisation | +| | Ratio | Utilisation | | -------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | |  | `4/3` | Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle. | |  | `16/9` | Format « moderne » des télévisions. | diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index 4a28c415f3..9ce19a1dbc 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -63,7 +63,7 @@ Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensio ```css textarea.exemple { - resize: none; + resize: none; } ``` @@ -108,7 +108,7 @@ p { <p class="redimensionnable"> Ce paragraphe peut être redimensionné car la propriété CSS resize vaut 'both' sur cet élément. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md index 206f0785a9..c3c30c827e 100644 --- a/files/fr/web/css/right/index.md +++ b/files/fr/web/css/right/index.md @@ -53,7 +53,7 @@ right: unset; - pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. + - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. - `auto` - : Un mot-clé qui représente : diff --git a/files/fr/web/css/rotate/index.md b/files/fr/web/css/rotate/index.md index 853720f5a9..c4f5572552 100644 --- a/files/fr/web/css/rotate/index.md +++ b/files/fr/web/css/rotate/index.md @@ -52,7 +52,7 @@ rotate: 1 1 1 90deg; ```html <div> - <p class="rotate">Rotation</p> + <p class="rotate">Rotation</p> </div> ``` diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md index 2897165c1c..ddf0332933 100644 --- a/files/fr/web/css/ruby-position/index.md +++ b/files/fr/web/css/ruby-position/index.md @@ -45,8 +45,8 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` @@ -54,14 +54,14 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:over; + ruby-position:over; } ``` @@ -73,14 +73,14 @@ On obtiendra le résultat suivant : ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:under; + ruby-position:under; } ``` diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md index 2d6a6ebcc5..65ec03ee20 100644 --- a/files/fr/web/css/scale/index.md +++ b/files/fr/web/css/scale/index.md @@ -47,7 +47,7 @@ scale: 2 0.5 2; ```html <div> - <p class="scale">Scaling</p> + <p class="scale">Scaling</p> </div> ``` diff --git a/files/fr/web/css/scroll-snap-destination/index.md b/files/fr/web/css/scroll-snap-destination/index.md index b92ac8f852..a5b2aa4811 100644 --- a/files/fr/web/css/scroll-snap-destination/index.md +++ b/files/fr/web/css/scroll-snap-destination/index.md @@ -42,27 +42,27 @@ scroll-snap-destination: unset; <div> <p>Coordonnées (0, 0)</p> <div class="scrollContainer destination0"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (25, 0)</p> <div class="scrollContainer destination25"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (50, 0)</p> <div class="scrollContainer destination50"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> </div> diff --git a/files/fr/web/css/scroll-snap-points-x/index.md b/files/fr/web/css/scroll-snap-points-x/index.md index 752ecde0f1..1eb8066c03 100644 --- a/files/fr/web/css/scroll-snap-points-x/index.md +++ b/files/fr/web/css/scroll-snap-points-x/index.md @@ -44,9 +44,9 @@ scroll-snap-points-x: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` @@ -54,12 +54,12 @@ scroll-snap-points-x: unset; ```css #container { - width: 200px; - overflow: auto; - white-space: nowrap; - scroll-snap-points-x: repeat(100%); - scroll-snap-type: mandatory; - font-size: 0; + width: 200px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + font-size: 0; } #container > div { diff --git a/files/fr/web/css/scroll-snap-points-y/index.md b/files/fr/web/css/scroll-snap-points-y/index.md index f8d1e9f162..a1a0640bea 100644 --- a/files/fr/web/css/scroll-snap-points-y/index.md +++ b/files/fr/web/css/scroll-snap-points-y/index.md @@ -45,9 +45,9 @@ scroll-snap-points-y: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md index 2961d1ffb3..57ece68cd8 100644 --- a/files/fr/web/css/scroll-snap-type/index.md +++ b/files/fr/web/css/scroll-snap-type/index.md @@ -56,7 +56,7 @@ scroll-snap-type: unset; - `mandatory` - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche. - `proximity` - - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. + - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. ### Syntaxe formelle diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md index 24e47e6a8d..3da51d89cd 100644 --- a/files/fr/web/css/selector_list/index.md +++ b/files/fr/web/css/selector_list/index.md @@ -87,4 +87,4 @@ h3 { font-family: sans-serif } ## Voir aussi -- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. +- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md index 78cabf13aa..f5d1f49380 100644 --- a/files/fr/web/css/text-align/index.md +++ b/files/fr/web/css/text-align/index.md @@ -177,7 +177,7 @@ La méthode la plus générique pour centrer un bloc plutot que de centrer son c L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs. - [Comprendre les règles WCAG 1.4](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) +- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) ## Spécifications diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md index b8fc9e345b..d4196bb280 100644 --- a/files/fr/web/css/text-decoration/index.md +++ b/files/fr/web/css/text-decoration/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/text-decoration La propriété **`text-decoration`** est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}. -{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». +{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». > **Note :** La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie. diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md index 723c88c987..a1609f5de4 100644 --- a/files/fr/web/css/text-emphasis-position/index.md +++ b/files/fr/web/css/text-emphasis-position/index.md @@ -33,7 +33,7 @@ text-emphasis-position: unset; ## Position privilégiée -La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : +La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : <table> <caption> diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md index 7cb0bb2de3..380c5e88e3 100644 --- a/files/fr/web/css/text-justify/index.md +++ b/files/fr/web/css/text-justify/index.md @@ -32,7 +32,7 @@ La propriété `text-justify` peut être définie grâce à l'un des mots-clés - `inter-word` - : Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen. - `inter-character` - - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. + - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. - `distribute` {{deprecated_inline}} - : Même effet que `inter-character` ; cette valeur sert uniquement à de fins de compatibilité. @@ -87,7 +87,7 @@ p { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | {{cssinfo}} diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md index 4fd812b457..2fbdf2d945 100644 --- a/files/fr/web/css/text-overflow/index.md +++ b/files/fr/web/css/text-overflow/index.md @@ -11,9 +11,9 @@ La propriété **`text-overflow`** définit la façon dont le contenu textuel qu Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (`''`). -Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. +Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. -Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. +Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. ## Syntaxe diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 33daa71ad3..bdc5fcfc4d 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/text-shadow --- {{CSSRef}} -La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. +La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. {{EmbedInteractiveExample("pages/css/text-shadow.html")}} @@ -36,20 +36,20 @@ text-shadow: unset; Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules. -Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. +Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. -Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. +Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}. ### Valeurs - {{cssxref("<color>")}} - - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. + - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. - \<decalage-x> \<decalage-y> - - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). + - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). - \<rayon-de-flou> - - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. + - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. ### Syntaxe formelle @@ -95,8 +95,8 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | -| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | +| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | {{cssinfo}} @@ -104,13 +104,13 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud {{Compat("css.properties.text-shadow")}} -### Notes CSS Quantum +### Notes CSS Quantum -- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. +- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. ## Voir aussi -- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif +- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif - {{cssxref("box-shadow")}} - Le type de données {{cssxref("<color>")}} (pour spécifier la couleur d'ombre) - [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color) diff --git a/files/fr/web/css/time-percentage/index.md b/files/fr/web/css/time-percentage/index.md index 7d979c4362..61f85952df 100644 --- a/files/fr/web/css/time-percentage/index.md +++ b/files/fr/web/css/time-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<time-percentage>` est autorisée dans une déclarati | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<time-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/time/index.md b/files/fr/web/css/time/index.md index c60d751bfc..f96c31af0c 100644 --- a/files/fr/web/css/time/index.md +++ b/files/fr/web/css/time/index.md @@ -51,7 +51,7 @@ La conversion entre `s` et `ms` suit la logique suivante : `1s = 1000ms`. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | -| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values','#time','<time>')}} | {{Spec2('CSS3 Values')}} | Définition normative de `s` et `ms` | | {{SpecName('CSS2.1','aural.html#times','<time>')}} | {{Spec2('CSS2.1')}} | Définition informelle de `s` et `ms` | diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md index ed3aa1d772..de84e8a8a2 100644 --- a/files/fr/web/css/top/index.md +++ b/files/fr/web/css/top/index.md @@ -115,13 +115,13 @@ p.relatif { ```css div { - border: 2px black dashed; + border: 2px black dashed; } p.absolu { - position: absolute; - top: 5em; - border: 2px black solid; + position: absolute; + top: 5em; + border: 2px black solid; } ``` diff --git a/files/fr/web/css/transform-function/index.md b/files/fr/web/css/transform-function/index.md index c82da2eb3b..5edd5bb473 100644 --- a/files/fr/web/css/transform-function/index.md +++ b/files/fr/web/css/transform-function/index.md @@ -95,7 +95,7 @@ Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. C - [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>) - : La fonction `translate3d()` permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes. - [`translateX()`](/fr/docs/orphaned/Web/CSS/transform-function/translateX) - - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. + - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. - [`translateY()`](</fr/docs/Web/CSS/transform-function/translateY()>) - : La fonction `translateY()` permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical. `translateY(ty)` est une notation raccourcie pour `translate(0, ty)`. - [`translateZ()`](</fr/docs/Web/CSS/transform-function/translateZ()>) diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md index eae07a3074..0dde6dc4b9 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.md +++ b/files/fr/web/css/transform-function/rotate3d()/index.md @@ -10,7 +10,7 @@ La fonction **`rotate3d()`** définit une transformation qui déplace un éléme {{EmbedInteractiveExample("pages/css/rotate3d.html")}} -Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. +Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. > **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md index 0b1d7315d5..7120a92d34 100644 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ b/files/fr/web/css/transform-function/scaley()/index.md @@ -30,7 +30,7 @@ scaleY(s) <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index c51a505285..8c2bb5b265 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -28,7 +28,7 @@ transform: translate(30%, 50%); ### Valeurs - Avec une seule valeur `<length-percentage>` - - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). + - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). - Avec deux valeurs `<length-percentage>` - : Ces valeurs sont de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md index feb4b031dc..f70578696e 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ b/files/fr/web/css/transform-function/translate3d()/index.md @@ -21,9 +21,9 @@ translate3d(tx, ty, tz) ### Valeurs - `tx` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). - `ty` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). - `tz` - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type [`<percentage>`](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md index fdd27c602c..e2c7779624 100644 --- a/files/fr/web/css/transform-function/translatey()/index.md +++ b/files/fr/web/css/transform-function/translatey()/index.md @@ -30,7 +30,7 @@ transform: translateY(50%); <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md index 0016830cda..ac7256551b 100644 --- a/files/fr/web/css/translate/index.md +++ b/files/fr/web/css/translate/index.md @@ -35,7 +35,7 @@ translate: 50% 105px 5rem; - Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - : Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur. - Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. + - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. - Trois valeurs - : Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments. - `none` @@ -51,7 +51,7 @@ translate: 50% 105px 5rem; ```html <div> - <p class="translate">Translation</p> + <p class="translate">Translation</p> </div> ``` diff --git a/files/fr/web/css/translation-value/index.md b/files/fr/web/css/translation-value/index.md index 369e797128..689e9e7992 100644 --- a/files/fr/web/css/translation-value/index.md +++ b/files/fr/web/css/translation-value/index.md @@ -19,7 +19,7 @@ Un argument `<translation-value>` peut être une valeur de type {{cssxref("<l | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | +| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | ## Voir aussi diff --git a/files/fr/web/css/type_selectors/index.md b/files/fr/web/css/type_selectors/index.md index 307773af45..89af40603d 100644 --- a/files/fr/web/css/type_selectors/index.md +++ b/files/fr/web/css/type_selectors/index.md @@ -51,7 +51,7 @@ span { | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | -| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#basic-concepts', 'type selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/unicode-bidi/index.md b/files/fr/web/css/unicode-bidi/index.md index 485461bb80..09d4ba0d18 100644 --- a/files/fr/web/css/unicode-bidi/index.md +++ b/files/fr/web/css/unicode-bidi/index.md @@ -58,8 +58,8 @@ unicode-bidi: unset; ```css .bible-quote { - direction: rtl; - unicode-bidi: embed; + direction: rtl; + unicode-bidi: embed; } ``` diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md index 894df5e40c..74ec2c2d3f 100644 --- a/files/fr/web/css/used_value/index.md +++ b/files/fr/web/css/used_value/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Valeur_utilisée La **valeur utilisée** de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés. -Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. +Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript [`window.getComputedStyle()`](/fr/docs/DOM/window.getComputedStyle). @@ -24,7 +24,7 @@ Quatre étapes permettent de déterminer la valeur finale de n'importe quelle pr 1. Tout d'abord, la [valeur spécifiée](/fr/docs/CSS/Valeur_spécifiée) est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'[héritage](/fr/docs/CSS/Héritage) (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée. 2. Ensuite, la [valeur calculée](/fr/docs/CSS/Valeur_calculée) est déterminée selon la spécification (par exemple, un `span` avec `position: absolute` aura `display` qui passera à `block` pour la valeur calculée). 3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur `auto` ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la **valeur utilisée**. -4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). +4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). ## Différence avec les valeurs calculées diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md index df5a54f37b..c39adabb62 100644 --- a/files/fr/web/css/user-select/index.md +++ b/files/fr/web/css/user-select/index.md @@ -50,8 +50,8 @@ user-select: unset; - Pour les pseudo-éléments `::before` et `::after`, la valeur calculée sera `none` - Si l'élément est un élément éditable, la valeur calculée est `contain` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` - Sinon, la valeur calculée est `text` - `text` diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md index 8151f52856..f8961efef3 100644 --- a/files/fr/web/css/using_css_custom_properties/index.md +++ b/files/fr/web/css/using_css_custom_properties/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties --- {{CSSRef}} -**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). +**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code). @@ -31,18 +31,18 @@ element { Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas. -Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. +Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. -Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. +Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. ## Définition Les propriétés personnalisées ont actuellement deux formes : -- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. -- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. +- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. +- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. -> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) +> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies. @@ -103,7 +103,7 @@ ce qui donne ceci : {{EmbedLiveSample("Exemple_1",600,180)}} -Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. +Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. ### Exemple 2 @@ -217,7 +217,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna } ``` -> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. +> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. > > La syntaxe de la deuxième règle (sur `.trois`) permet d'utiliser une autre variable comme variable de secours et une autre valeur (`pink`) dans le cas où cette deuxième variable ne fonctionne pas. @@ -225,7 +225,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna ## Validité et valeurs -Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. +Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle `var()`, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de _valide lors de l'exécution_. @@ -279,7 +279,7 @@ element.style.setProperty("--ma-variable", varJS + 4); {{Compat("css.properties.custom-property")}} -> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) +> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) ## Voir aussi diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md index 8b54577326..f557232db0 100644 --- a/files/fr/web/css/value_definition_syntax/index.md +++ b/files/fr/web/css/value_definition_syntax/index.md @@ -271,7 +271,7 @@ Mais pas à : <th colspan="4">Combinateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Juxtaposition</td> <td> Les composants sont obligatoires et doivent apparaître dans cet ordre. @@ -317,7 +317,7 @@ Mais pas à : <th colspan="4">Multiplicateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Aucun multiplicateur</td> <td>Exactement 1 fois.</td> <td><code>solid</code></td> diff --git a/files/fr/web/css/var()/index.md b/files/fr/web/css/var()/index.md index f57afd0f16..4cefbea53b 100644 --- a/files/fr/web/css/var()/index.md +++ b/files/fr/web/css/var()/index.md @@ -34,7 +34,7 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst - `<declaration-value>` - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici. -## Exemples +## Exemples ```css :root{ diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md index 54c2a8f1fc..c9c9e09d63 100644 --- a/files/fr/web/css/viewport_concepts/index.md +++ b/files/fr/web/css/viewport_concepts/index.md @@ -113,8 +113,8 @@ Lorsqu'on utilise une requête média à l'intérieur du document de l'_iframe_, ```css @media screen and (min-width: 500px) { p { - color: red; - } + color: red; + } } ``` diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md index d1972480ec..e8dddca2bc 100644 --- a/files/fr/web/css/visual_formatting_model/index.md +++ b/files/fr/web/css/visual_formatting_model/index.md @@ -59,7 +59,7 @@ Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`di ``` On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante : -  +  À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur `initial`. diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md index 8822ee52d2..f4aec06454 100644 --- a/files/fr/web/css/width/index.md +++ b/files/fr/web/css/width/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/width --- {{CSSRef}} -La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). +La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). {{EmbedInteractiveExample("pages/css/width.html")}} @@ -173,7 +173,7 @@ p.minblue { Il faut s'assurer que les éléments sur lesquels on utilise `width` ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte. - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) +- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) ## Spécifications diff --git a/files/fr/web/css/zoom/index.md b/files/fr/web/css/zoom/index.md index 43612f3a43..480eee20ab 100644 --- a/files/fr/web/css/zoom/index.md +++ b/files/fr/web/css/zoom/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/zoom --- {{CSSRef}}{{Non-standard_header}} -La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. +La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. ## Syntaxe @@ -62,7 +62,7 @@ zoom: unset; - {{cssxref("<percentage>")}} - : Le facteur de zoom à appliquer. `100%` est équivalent au mot-clé `normal`. Les valeurs supérieures à `100%` agrandissent l'élément et les valeurs inférieures le réduisent. - {{cssxref("<number>")}} - - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. + - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. ### Syntaxe formelle diff --git a/files/fr/web/demos/index.md b/files/fr/web/demos/index.md index 5f15606a20..9accd591f6 100644 --- a/files/fr/web/demos/index.md +++ b/files/fr/web/demos/index.md @@ -28,7 +28,7 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante - [Canvas ash1](https://glimr.rubyforge.org/cake/demos/canvas_ash.html) - [Canvas ash2](https://glimr.rubyforge.org/cake/demos/canvas_ash2.html) - [Canvas ash8](https://glimr.rubyforge.org/cake/demos/canvas_ash8.html) -- [3D on 2D Canvas](https://gyu.que.jp/jscloth/) +- [3D on 2D Canvas](https://gyu.que.jp/jscloth/) - [miniPaint - Image editor](https://viliusle.github.io/miniPaint/) ([source code](https://github.com/viliusle/miniPaint)) ### SVG diff --git a/files/fr/web/exslt/exsl/object-type/index.md b/files/fr/web/exslt/exsl/object-type/index.md index 70379ca04c..a65304c5ff 100644 --- a/files/fr/web/exslt/exsl/object-type/index.md +++ b/files/fr/web/exslt/exsl/object-type/index.md @@ -23,7 +23,7 @@ translation_of: Web/EXSLT/exsl/object-type ### Retourne -Le type de l'`objet`, qui sera un des types suivants : +Le type de l'`objet`, qui sera un des types suivants : - `string` (chaîne) - `number` (nombre) diff --git a/files/fr/web/exslt/index.md b/files/fr/web/exslt/index.md index 84969a2e4b..63cc37f311 100644 --- a/files/fr/web/exslt/index.md +++ b/files/fr/web/exslt/index.md @@ -8,7 +8,7 @@ tags: translation_of: Web/EXSLT --- {{ XsltRef() }} -EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modules existent ; ceux qui sont supportés par Firefox sont listés ci-dessous : +EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modules existent ; ceux qui sont supportés par Firefox sont listés ci-dessous : - [Common](#Common) (`exsl`) - : Fournit des éléments et des fonctions basiques d'extension. @@ -23,7 +23,7 @@ EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modu ### Utilisation de EXSLT -Pour utiliser une fonction EXSLT, il faut déclarer son espace de noms comme espace de noms d'extension dans votre feuille de style. Par exemple, pour utiliser le package regexp : +Pour utiliser une fonction EXSLT, il faut déclarer son espace de noms comme espace de noms d'extension dans votre feuille de style. Par exemple, pour utiliser le package regexp : <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" diff --git a/files/fr/web/exslt/str/split/index.md b/files/fr/web/exslt/str/split/index.md index bf6f1c9984..26f6ff1033 100644 --- a/files/fr/web/exslt/str/split/index.md +++ b/files/fr/web/exslt/str/split/index.md @@ -25,11 +25,11 @@ translation_of: Web/EXSLT/str/split Un ensemble de nœuds d'éléments `token`, contenant chacun un `token` provenant de `chaîne`. -Par exemple : +Par exemple : str:split('livre, téléphone, ordinateur, chaise', ', ') -Retourne l'ensemble de nœuds suivant : +Retourne l'ensemble de nœuds suivant : <token>livre</token> <token>téléphone</token> diff --git a/files/fr/web/exslt/str/tokenize/index.md b/files/fr/web/exslt/str/tokenize/index.md index a7cfefe6fc..3e61c76c97 100644 --- a/files/fr/web/exslt/str/tokenize/index.md +++ b/files/fr/web/exslt/str/tokenize/index.md @@ -25,11 +25,11 @@ translation_of: Web/EXSLT/str/tokenize Un ensemble de nœuds d'éléments `token`, contenant chacun un `token` provenant de `chaîne`. -Par exemple : +Par exemple : str:tokenize('2007-09-14-03T11:40:23', '-T:') -Retourne l'ensemble de nœuds suivant : +Retourne l'ensemble de nœuds suivant : <token>2007</token> <token>09</token> diff --git a/files/fr/web/guide/ajax/getting_started/index.md b/files/fr/web/guide/ajax/getting_started/index.md index 7d9f75c8e5..b7bfd4eed9 100644 --- a/files/fr/web/guide/ajax/getting_started/index.md +++ b/files/fr/web/guide/ajax/getting_started/index.md @@ -10,11 +10,11 @@ Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples ### Présentation d’AJAX -AJAX est un raccourci pour **A**synchronous **J**avaScript **A**nd **X**ML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/XMLHttpRequest") pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger. +AJAX est un raccourci pour **A**synchronous **J**avaScript **A**nd **X**ML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/XMLHttpRequest") pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger. -Les deux principales fonctionnalités d’AJAX permettent de : +Les deux principales fonctionnalités d’AJAX permettent de : -- faire des requêtes vers le serveur sans recharger la page ; +- faire des requêtes vers le serveur sans recharger la page ; - recevoir et travailler avec des données provenant du serveur. ### Étape 1 — Lancement d’une requête HTTP @@ -33,13 +33,13 @@ else if (window.ActiveXObject) { // IE 6 et antérieurs > **Note :** Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article. -Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet `httpRequest` le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété `onreadystatechange` de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci : +Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet `httpRequest` le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété `onreadystatechange` de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci : ```js httpRequest.onreadystatechange = nomDeLaFonction; ``` -Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : +Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : ```js httpRequest.onreadystatechange = function() { @@ -47,18 +47,18 @@ httpRequest.onreadystatechange = function() { }; ``` -Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : +Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : ```js httpRequest.open('GET', 'http://www.example.org/some.file', true); httpRequest.send(); ``` -- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). -- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). -- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». +- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). +- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). +- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». -Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : +Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : ```js "nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite" @@ -66,7 +66,7 @@ Le paramètre de la méthode `send()` peut être n’importe quelle donnée que Ou d’autres formats tels que `multipart/form-data`, JSON, XML, etc. -Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : +Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : ```js httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); @@ -90,7 +90,7 @@ if (httpRequest.readyState === XMLHttpRequest.DONE) { } ``` -La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : +La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : - 0 (non initialisée) ou (requête non initialisée) - 1 (en cours de chargement) ou (connexion établie avec le serveur) @@ -110,16 +110,16 @@ if (httpRequest.status === 200) { } ``` -Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : +Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : -- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; +- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; - `httpRequest.responseXML` — renvoie la réponse sous la forme d’un objet `XMLDocument` que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript. Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’`open()` n’a pas été spécifié, ou a été défini à `true`). Si vous utilisez une requête **synchrone,** vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur. ### Étape 3 — Un exemple simple -Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, `test.html`, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message `alert()`. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier. +Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, `test.html`, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message `alert()`. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier. ```html <button id="ajaxButton" type="button">Faire une requête</button> @@ -154,20 +154,20 @@ Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. No </script> ``` -Dans cet exemple : +Dans cet exemple : -- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ; -- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ; +- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ; +- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ; - la requête est faite, puis l’exécution est passée à `alertContents()` (via `onreadystatechange`); - `alertContents()` vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier `test.html` dans un message `alert()`. -> **Note :** Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête `Content-Type: application/xml`, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML. +> **Note :** Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête `Content-Type: application/xml`, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML. > **Note :** Si vous ne spécifiez pas l’en-tête `Cache-Control: no-cache`, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir [contourner le cache](https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache)). > **Note :** Si la variable `httpRequest` est utilisée globalement, des appels concurrents à `makeRequest()` peuvent s’écraser l’un l’autre, provoquant une situation de compétition _(race condition_). On peut s’en prémunir en déclarant la variable `httpRequest` locale à une [closure](/fr/docs/Web/JavaScript/Closures) contenant les fonctions AJAX. -Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode `onreadystatechange` lors de l’accès à la propriété `status`. Pour atténuer ce problème, vous pouvez entourer votre bloc `if...then` dans un `try...catch` : +Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode `onreadystatechange` lors de l’accès à la propriété `status`. Pour atténuer ce problème, vous pouvez entourer votre bloc `if...then` dans un `try...catch` : ```js function alertContents(httpRequest) { @@ -190,7 +190,7 @@ function alertContents(httpRequest) { Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété `responseText` de l’objet, qui contenait le contenu du fichier `test.html`. Essayons maintenant la propriété `responseXML`. -Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (`test.xml`) contient ce qui suit : +Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (`test.xml`) contient ce qui suit : ```xml <?xml version="1.0" ?> @@ -199,7 +199,7 @@ Tout d’abord, créons un document XML valide qui sera l’objet de la requête </root> ``` -Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : +Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : ```html ... @@ -207,7 +207,7 @@ onclick="makeRequest('test.xml')"> ... ``` -Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : +Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : ```js var xmldoc = httpRequest.responseXML; @@ -223,9 +223,9 @@ Interwiki ### Étape 5 – Manipuler les données -Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. +Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. -D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : +D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : ```html <label>Vore nom : @@ -236,7 +236,7 @@ D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’u </span> ``` -Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : +Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : ```js document.getElementById("ajaxButton").onclick = function() { @@ -245,7 +245,7 @@ Nous allons également ajouter une ligne à notre gestionnaire d’événement p }; ``` -Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : +Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : ```js function makeRequest(url, userName) { @@ -259,13 +259,13 @@ Nous devons modifier `makeRequest()` afin d’accepter les données et les trans } ``` -La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : +La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : ```json {"userData":"Dorothée","computedString":"Bonjour, Dorothée !"} ``` -Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : +Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : ```js function alertContents() { @@ -280,7 +280,7 @@ function alertContents() { } ``` -Le fichier `test.php` devrait contenir ce qui suit : +Le fichier `test.php` devrait contenir ce qui suit : ```php $name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme'; diff --git a/files/fr/web/guide/ajax/index.md b/files/fr/web/guide/ajax/index.md index 9341969376..757cac27d0 100644 --- a/files/fr/web/guide/ajax/index.md +++ b/files/fr/web/guide/ajax/index.md @@ -3,18 +3,18 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/AJAX --- -**AJAX (Asynchronous JavaScript + XML)** n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : [HTML](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/XMLHttpRequest"). Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur. +**AJAX (Asynchronous JavaScript + XML)** n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : [HTML](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/XMLHttpRequest"). Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur. -#### **Quand utiliser (ou non) AJAX ?** +#### **Quand utiliser (ou non) AJAX ?** S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : -- La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais **n'autorise pas davantage** que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur **doit** envoyer des entêtes et négocier la transaction. - La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (_le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les [WebSockets](https://developer.mozilla.org/fr/docs/WebSockets)_). -- La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est **totalement** transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage. - Ne pas confondre *possible* et *souhaitable* : AJAX **peut** négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des [raisons de sécurité](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. -- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. - Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc _in fine_ des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (_voir le principe de [dégradation élégante](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. +- La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais **n'autorise pas davantage** que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur **doit** envoyer des entêtes et négocier la transaction. + La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (_le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les [WebSockets](https://developer.mozilla.org/fr/docs/WebSockets)_). +- La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est **totalement** transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage. + Ne pas confondre *possible* et *souhaitable* : AJAX **peut** négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des [raisons de sécurité](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. +- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. + Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc _in fine_ des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (_voir le principe de [dégradation élégante](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. <table> <tbody> @@ -78,11 +78,11 @@ S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garde </dt> <dd> <small - >« Comme on le remarquera, il est assez facile de tirer parti de + >« Comme on le remarquera, il est assez facile de tirer parti de l'objet XMLHttpRequest pour faire se comporter une application Web un peu plus comme une application traditionnelle, tout en continuant à utiliser des outils comme des formulaires Web pour - collecter les entrées de l'utilisateur. »</small + collecter les entrées de l'utilisateur. »</small > </dd> </dl> @@ -131,7 +131,7 @@ S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garde <dt> <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/" >La spécification XMLHttpRequest</a - >- + >- <a class="external" href="http://www.xul.fr/XMLHttpRequest.html" >(Traduction française)</a > diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md index 394be3cf5f..baea0e605d 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md @@ -6,17 +6,17 @@ original_slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC --- {{SeeCompatTable}} -Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi `navigator.mozGetUserMedia()` à accéder au microphone et à la webcam (`getUserMedia()` est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording). +Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi `navigator.mozGetUserMedia()` à accéder au microphone et à la webcam (`getUserMedia()` est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording). -La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/rmcat/) et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à [webrtc.org](http://www.webrtc.org/reference). +La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/rmcat/) et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à [webrtc.org](http://www.webrtc.org/reference). -**NOTE**: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 `<video>` par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons. +**NOTE**: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 `<video>` par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons. -Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/). On pourra trouver sur le site [webrtc-landing](http://mozilla.github.com/webrtc-landing) une série de page de test basique. +Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/). On pourra trouver sur le site [webrtc-landing](http://mozilla.github.com/webrtc-landing) une série de page de test basique. -Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à [apprtc.appspot.com](https://apprtc.appspot.com/). +Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à [apprtc.appspot.com](https://apprtc.appspot.com/). -Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion` ([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) : +Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion` ([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) :  diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md index 040a2b93fd..76ba3ac6af 100644 --- a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md @@ -96,7 +96,7 @@ Et un peu de JavaScript: var startX = myAudio.buffered.start(i) * inc; var endX = myAudio.buffered.end(i) * inc; - var width = endX - startX; + var width = endX - startX; context.fillRect(startX, 0, width, myCanvas.height); context.rect(startX, 0, width, myCanvas.height); @@ -130,7 +130,7 @@ Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles l var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1); ``` -> **Note :** `myAudio.seekable.end(myAudio.seekable.length - 1)` nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — `audio.seekable` sera l'équivalent de `audio.buffered` — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément. +> **Note :** `myAudio.seekable.end(myAudio.seekable.length - 1)` nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — `audio.seekable` sera l'équivalent de `audio.buffered` — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément. Il est peut-être préférable de donner une indication de la quantité de média effectivement téléchargée — c'est ce que les lecteurs natifs du navigateur semblent indiquer. @@ -190,12 +190,12 @@ window.onload = function(){ myAudio.addEventListener('progress', function() { var duration = myAudio.duration; if (duration > 0) { - for (var i = 0; i < myAudio.buffered.length; i++) { - if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { - document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; - break; - } - } + for (var i = 0; i < myAudio.buffered.length; i++) { + if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { + document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; + break; + } + } } }); diff --git a/files/fr/web/guide/audio_and_video_delivery/index.md b/files/fr/web/guide/audio_and_video_delivery/index.md index e4ceb5c6db..9d5c6036e2 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/index.md @@ -7,16 +7,16 @@ On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, ## Les éléments audio et vidéo -Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video). Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants : +Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video). Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants : - [Tableau de compatibilité des codecs audio](/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support) - [Guide sur les codecs pour les vidéos](/fr/docs/Web/Media/Formats/Video_codecs) -Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit : +Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit : -1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ; -2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ; -3. Définir la façon dont vous voulez lire/instancier le média (par exemple un élément [`<video>`](/fr/docs/Web/HTML/Element/video), ou peut-être via JavaScript avec `document.createElement('video')`) ; +1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ; +2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ; +3. Définir la façon dont vous voulez lire/instancier le média (par exemple un élément [`<video>`](/fr/docs/Web/HTML/Element/video), ou peut-être via JavaScript avec `document.createElement('video')`) ; 4. Ajouter le fichier média au lecteur. ### Audio HTML @@ -82,7 +82,7 @@ On définit la source de l'audio en fonction du type de fichier audio pris en ch > **Note :** `play()` sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site. -Il est également possible de donner un fichier WAV encodé en base64 à l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio), permettant ainsi de générer de l'audio à la volée : +Il est également possible de donner un fichier WAV encodé en base64 à l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio), permettant ainsi de générer de l'audio à la volée : ```html <audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio> @@ -143,13 +143,13 @@ Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le li Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec `getUserMedia` et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera. -Pour récupérer un flux de la webcam, commençons par créer un élément [`<video>`](/fr/docs/Web/HTML/Element/video) : +Pour récupérer un flux de la webcam, commençons par créer un élément [`<video>`](/fr/docs/Web/HTML/Element/video) : ```html <video id="webcam" width="480" height="360"></video> ``` -Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video : +Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video : ```js if (navigator.mediaDevices) { @@ -173,7 +173,7 @@ Pour en savoir plus, lisez la page [`MediaDevices.getUserMedia`](/fr/docs/Web/AP De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant `getUserMedia` — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par `getUserMedia`, on le donne en paramètre à un objet `MediaRecorder`, puis on utilise le résultat obtenu comme source audio ou video. -Le principe de base est décrit ci-après : +Le principe de base est décrit ci-après : ```js navigator.mediaDevices.getUserMedia({audio:true}) @@ -205,7 +205,7 @@ Voir [l'API MediaRecorder](/fr/docs/Web/API/MediaRecorder_API) pour plus de dét ## Media Source Extensions (MSE) -[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct. +[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct. ### Encrypted Media Extensions (EME) @@ -308,7 +308,7 @@ mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le na ### Définir des intervalles de lecture -Lors de la définition de l'URI du média d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video), il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média. +Lors de la définition de l'URI du média d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video), il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média. Un intervalle temporel se définit avec la syntaxe suivante : @@ -335,12 +335,12 @@ Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les diffé Utilisez les fichiers suivants pour vérifier le support de votre format: -- Audio MP3 (`type="audio/mpeg"`) : <https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3> ([audio MP3 en direct](https://jsbin.com/gekatoge/1/edit)) -- Audio MP4 (`type="audio/mp4"`) : <https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a> ([audio MP4 en direct](https://jsbin.com/gekatoge/2/edit)) -- Audio Ogg (`type="audio/ogg"`) : <https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg> ([audio OGG en direct](https://jsbin.com/gekatoge/4/edit)) -- Video MP4 (`type="video/mp4"`) : <https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v> ([vidéo MP4 en direct](https://jsbin.com/gekatoge/5/edit)) -- Video WebM (`type="video/webm"`) : <https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm> ([vidéo WebM en direct](https://jsbin.com/gekatoge/6/edit)) -- Video Ogg (`type="video/ogg"`) : <https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv> ([vidéo OGG en direct](https://jsbin.com/gekatoge/7/edit)) +- Audio MP3 (`type="audio/mpeg"`) : <https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3> ([audio MP3 en direct](https://jsbin.com/gekatoge/1/edit)) +- Audio MP4 (`type="audio/mp4"`) : <https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a> ([audio MP4 en direct](https://jsbin.com/gekatoge/2/edit)) +- Audio Ogg (`type="audio/ogg"`) : <https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg> ([audio OGG en direct](https://jsbin.com/gekatoge/4/edit)) +- Video MP4 (`type="video/mp4"`) : <https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v> ([vidéo MP4 en direct](https://jsbin.com/gekatoge/5/edit)) +- Video WebM (`type="video/webm"`) : <https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm> ([vidéo WebM en direct](https://jsbin.com/gekatoge/6/edit)) +- Video Ogg (`type="video/ogg"`) : <https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv> ([vidéo OGG en direct](https://jsbin.com/gekatoge/7/edit)) Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours. @@ -348,7 +348,7 @@ Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a de #### 1. Le serveur ne fournit pas le type MIME correct du fichier -Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier `.htaccess` : +Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier `.htaccess` : # AddType TYPE/SUBTYPE EXTENSION @@ -365,7 +365,7 @@ Bien que les serveurs les prennent généralement en charge, vous allez peut-êt #### 2. Votre fichier n'est pas encodé correctement -Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables : +Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables : - [Audacity](https://audacity.sourceforge.net/) - Éditeur et enregistreur audio gratuit - [Miro](https://www.getmiro.com/) - Lecteur audio et vidéo open-source et gratuit @@ -413,19 +413,19 @@ Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plu ### Vidéo uniquement -- [flowplayer](https://flowplayer.org/) : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL) -- [JWPlayer](https://www.jwplayer.com) : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons) -- [SublimeVideo](https://www.sublimevideo.net/) : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN. -- [Video.js](https://www.videojs.com/) : Gratuit et open source (licence Apache 2) +- [flowplayer](https://flowplayer.org/) : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL) +- [JWPlayer](https://www.jwplayer.com) : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons) +- [SublimeVideo](https://www.sublimevideo.net/) : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN. +- [Video.js](https://www.videojs.com/) : Gratuit et open source (licence Apache 2) ### Audio et vidéo -- [jPlayer](https://jPlayer.org) : Gratuit et open source (Licence MIT) -- [mediaelement.js](https://mediaelementjs.com/) : Gratuit et open source (Licence MIT) +- [jPlayer](https://jPlayer.org) : Gratuit et open source (Licence MIT) +- [mediaelement.js](https://mediaelementjs.com/) : Gratuit et open source (Licence MIT) ### Web Audio API -- [AudioContext monkeypatch](https://github.com/cwilso/AudioContext-MonkeyPatch) : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio +- [AudioContext monkeypatch](https://github.com/cwilso/AudioContext-MonkeyPatch) : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio ## Tutoriels pour apprendre les bases @@ -446,7 +446,7 @@ Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plu - [Diffusion en direct de fichiers audio et vidéo sur le web](/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video) - - : Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de + - : Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de <i lang="en">streaming</i> diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md index 1a6d7f0665..7f81eac7a5 100644 --- a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md @@ -66,7 +66,7 @@ Par exemple: </video> ``` -## Extensions de Sources Média (MSE) +## Extensions de Sources Média (MSE) [Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams. @@ -101,16 +101,16 @@ Au début de la session de streaming, une [playlist M3U étendue (m3u8)](http:// | Navigateur | DASH | HLS | Opus (Audio) | | ------------------------ | ----- | ----- | ------------ | | Firefox 32 | ✓ [1] | ✓ [2] | ✓ 14+ | -| Safari 6+ | | ✓ | | -| Chrome 24+ | ✓ [1] | ✓ | | -| Opera 20+ | ✓ [1] | | | -| Internet Explorer 10+ | ✓ 11 | ✓ [2] | | +| Safari 6+ | | ✓ | | +| Chrome 24+ | ✓ [1] | ✓ | | +| Opera 20+ | ✓ [1] | | | +| Internet Explorer 10+ | ✓ 11 | ✓ [2] | | | Firefox Mobile | ✓ | ✓ | ✓ | -| Safari iOS6+ | | ✓ | | -| Chrome Mobile | ✓ | ✓ [2] | | -| Opera Mobile | ✓ [1] | ✓ | | -| Internet Explorer Mobile | ✓ 11 | ✓ [2] | | -| Android | ✓ | | | +| Safari iOS6+ | | ✓ | | +| Chrome Mobile | ✓ | ✓ [2] | | +| Opera Mobile | ✓ [1] | ✓ | | +| Internet Explorer Mobile | ✓ 11 | ✓ [2] | | +| Android | ✓ | | | \[1] Via JavaScript et MSE @@ -160,7 +160,7 @@ Pour le transfert RTMP, vous pouvez utiliser le [module Nginx RTMP](https://gith ### Icecast -Le serveur [Icecast](http://www.icecast.org/) est une technologie open source pour diffuser des média en streaming. Maintenu par [Xiph.org Foundation](http://www.xiph.org/), il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast. +Le serveur [Icecast](http://www.icecast.org/) est une technologie open source pour diffuser des média en streaming. Maintenu par [Xiph.org Foundation](http://www.xiph.org/), il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast. > **Note :** SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux [autres systèmes de diffusion en streaming disponibles](http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers). diff --git a/files/fr/web/guide/audio_and_video_manipulation/index.md b/files/fr/web/guide/audio_and_video_manipulation/index.md index ec64e401e5..432929118a 100644 --- a/files/fr/web/guide/audio_and_video_manipulation/index.md +++ b/files/fr/web/guide/audio_and_video_manipulation/index.md @@ -10,7 +10,7 @@ tags: - WebGL translation_of: Web/Guide/Audio_and_video_manipulation --- -La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, [WebGL](/fr/docs/Web/API/WebGL_API) ou [Web Audio API](/fr/docs/Web/API/Web_Audio_API) pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir & blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire. +La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, [WebGL](/fr/docs/Web/API/WebGL_API) ou [Web Audio API](/fr/docs/Web/API/Web_Audio_API) pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir & blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire. ## Manipulation Vidéo @@ -132,8 +132,8 @@ myVideo.playbackRate = 2; <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var myVideo = document.getElementById('my-video'); @@ -215,8 +215,8 @@ filter.gain.value = 25; <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; diff --git a/files/fr/web/guide/graphics/index.md b/files/fr/web/guide/graphics/index.md index d458fb84e4..d7fc5502c9 100644 --- a/files/fr/web/guide/graphics/index.md +++ b/files/fr/web/guide/graphics/index.md @@ -24,12 +24,12 @@ Les articles ci-dessous vous permettront de vous familiariser avec ces technolog - [Dessiner avec les canvas](/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas) - : Un guide d'introduction pour utiliser l'élément pour dessiner en 2D. - [SVG](/fr/docs/SVG) - - : Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite. + - : Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite. ## Graphismes 3D - [WebGL](/fr/docs/WebGL) - - : Un guide pour débuter avec WebGL l'API graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web. + - : Un guide pour débuter avec WebGL l'API graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web. ## Video diff --git a/files/fr/web/guide/html/content_categories/index.md b/files/fr/web/guide/html/content_categories/index.md index 10fed97d97..ce6fff092b 100644 --- a/files/fr/web/guide/html/content_categories/index.md +++ b/files/fr/web/guide/html/content_categories/index.md @@ -62,7 +62,7 @@ Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTM Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes. -Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs). +Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs). Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions : @@ -97,7 +97,7 @@ Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les élém ### Contenu associé aux formulaires -Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut **form**. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut **form**. +Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut **form**. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut **form**. Cette catégorie contient les éléments : @@ -118,7 +118,7 @@ Cette catégorie peut être subdivisée en plusieurs sous-catégories. - listed (éléments listés) - : Les éléments étant listés sont les ensembles IDL [form.elements](/fr/docs/DOM/form.elements "DOM/form.elements") et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}. - labelable (éléments étiquetables) - - : Les éléments pouvant être associés avec des éléments {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. + - : Les éléments pouvant être associés avec des éléments {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. - submittable (éléments participants à l'envoi du formulaire) - : Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. - resettable (éléments de ré-initialisation) diff --git a/files/fr/web/guide/performance/index.md b/files/fr/web/guide/performance/index.md index 9731275914..5f79a4315d 100644 --- a/files/fr/web/guide/performance/index.md +++ b/files/fr/web/guide/performance/index.md @@ -7,12 +7,12 @@ tags: - Web translation_of: Web/Guide/Performance --- -Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : +Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : - [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - [Pingdome - Website Performance Monitoring](https://www.pingdom.com) - [ySlow](http://yslow.org/) -Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. [WP Super Charge](https://codecanyon.net/item/wp-super-charge/17091749) est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic. +Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. [WP Super Charge](https://codecanyon.net/item/wp-super-charge/17091749) est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic. {{LandingPageListSubpages}} diff --git a/files/fr/web/guide/writing_forward-compatible_websites/index.md b/files/fr/web/guide/writing_forward-compatible_websites/index.md index 4ff89b5235..d847290b5c 100644 --- a/files/fr/web/guide/writing_forward-compatible_websites/index.md +++ b/files/fr/web/guide/writing_forward-compatible_websites/index.md @@ -13,7 +13,7 @@ C'est d'autant plus important pour les intranets et autres sites non-publics; s' ## JavaScript -### Préfixez tous les accès à des variables globales dans les attributs `onfoo` par “`window.`” +### Préfixez tous les accès à des variables globales dans les attributs `onfoo` par “`window.`” Quand un attribut de gestion d'évenement (`onclick`, `onmouseover`, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur `document`, puis finalement sur `window` (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant : @@ -45,9 +45,9 @@ Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recomm ### Détecter des fonctionnalités particulières -Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur `"filter" in body.style` s'évalue à `true`, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet `window.event` disponible dans les gestionnaires d'évenement. +Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur `"filter" in body.style` s'évalue à `true`, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet `window.event` disponible dans les gestionnaires d'évenement. -De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte *pas* une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte `onload` sur les éléments scripts alors cela signifie qu'il ne supportera jamais `onreadystatechange` sur ces mêmes éléments. +De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte *pas* une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte `onload` sur les éléments scripts alors cela signifie qu'il ne supportera jamais `onreadystatechange` sur ces mêmes éléments. Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore. @@ -92,7 +92,7 @@ Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : a Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements. -Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site. +Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site. ### N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions diff --git a/files/fr/web/html/attributes/accept/index.md b/files/fr/web/html/attributes/accept/index.md index 66c18d9ef0..825503001a 100644 --- a/files/fr/web/html/attributes/accept/index.md +++ b/files/fr/web/html/attributes/accept/index.md @@ -16,14 +16,14 @@ L'attribut **`accept`** prend comme valeur une liste séparée par des virgules Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté. -Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un `<input>` comme celui-ci : +Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un `<input>` comme celui-ci : ```html <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> ``` -En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média : +En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média : ```html <input type="file" id="soundFile" accept="audio/*"> diff --git a/files/fr/web/html/date_and_time_formats/index.md b/files/fr/web/html/date_and_time_formats/index.md index 48353fd7b2..ed70cec78d 100644 --- a/files/fr/web/html/date_and_time_formats/index.md +++ b/files/fr/web/html/date_and_time_formats/index.md @@ -264,7 +264,7 @@ On notera que les deux composantes pour l'année et pour la semaine sont complé ## Représentation des mois -Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972. +Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972. Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("`-`", ou U+002D), suivi d'un nombre sur deux chiffres où `01` représente janvier et où `12` représente décembre. diff --git a/files/fr/web/html/element/a/index.md b/files/fr/web/html/element/a/index.md index fc5bbdf380..f703aa989b 100644 --- a/files/fr/web/html/element/a/index.md +++ b/files/fr/web/html/element/a/index.md @@ -418,7 +418,7 @@ Les personnes qui utilisent des outils d'assistance à la navigation comme des l Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien [une description alternative](/fr/docs/Web/HTML/Element/Img#attr-alt). ```html -<a target="_blank" href="https://www.wikipedia.org"> +<a target="_blank" href="https://www.wikipedia.org"> Wikipédia <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg"> </a> diff --git a/files/fr/web/html/element/audio/index.md b/files/fr/web/html/element/audio/index.md index 1345b3da29..d42cb18d38 100644 --- a/files/fr/web/html/element/audio/index.md +++ b/files/fr/web/html/element/audio/index.md @@ -231,7 +231,7 @@ En plus des dialogues parlés, les sous-titres et les transcriptions doivent ég 00:00:52 --> 00:01:02 [sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ? -Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge `<audio>` : +Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge `<audio>` : ```html <audio controls> diff --git a/files/fr/web/html/element/colgroup/index.md b/files/fr/web/html/element/colgroup/index.md index fa0f0b76a7..42417eeaf4 100644 --- a/files/fr/web/html/element/colgroup/index.md +++ b/files/fr/web/html/element/colgroup/index.md @@ -135,7 +135,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils - **`bgcolor`** {{deprecated_inline}} - - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé. + - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé. Pour obtenir un effet similaire, utilisez la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color). diff --git a/files/fr/web/html/element/head/index.md b/files/fr/web/html/element/head/index.md index f5ba498b1e..cbbbc9a6f0 100644 --- a/files/fr/web/html/element/head/index.md +++ b/files/fr/web/html/element/head/index.md @@ -94,7 +94,7 @@ La plupart des navigateurs conformes à HTML5 construisent automatiquement l'él | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- | | {{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation. | | {{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}} | {{Spec2('HTML5 W3C')}} | L'attribut `profile` est désormais obsolète. | -| {{SpecName('HTML4.01', 'global.html#h-7.4.1', '<head>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML4.01', 'global.html#h-7.4.1', '<head>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/hgroup/index.md b/files/fr/web/html/element/hgroup/index.md index 4b4e76d8c1..f07358ec1f 100644 --- a/files/fr/web/html/element/hgroup/index.md +++ b/files/fr/web/html/element/hgroup/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/hgroup --- {{HTMLRef}} -L'élément HTML **`<hgroup>`** représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). +L'élément HTML **`<hgroup>`** représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). {{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}} @@ -139,7 +139,7 @@ Ici, le titre secondaire est placé entre parenthèses après le titre principal | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md index e0ff7fcca8..ef0e339629 100644 --- a/files/fr/web/html/element/input/button/index.md +++ b/files/fr/web/html/element/input/button/index.md @@ -144,7 +144,7 @@ function disableBtn() { Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur. -C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. +C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. #### Exemple 2 diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index 0ec7d916c7..a41d265409 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -233,7 +233,7 @@ C'est pour cela que la meilleure solution consiste à avoir trois champs de sais ## Exemples -Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. +Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. {{EmbedLiveSample('Exemples', 600, 100)}} @@ -348,7 +348,7 @@ function populateDays(month) { // Si le mois est février, on calcule si l'année est bissextile var year = yearSelect.value; var leap = new Date(year, 1, 29).getMonth() == 1; - dayNum = leap ? 29 : 28; + dayNum = leap ? 29 : 28; } // on ajoute le bon nombre de jours dans autant @@ -441,7 +441,7 @@ daySelect.onchange = function() { <td> {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et + {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index 02f7a49cd6..a5d22bfb05 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -222,7 +222,7 @@ C'est ce second problème qui est le plus important. Comme nous l'avons mentionn - `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) - etc. -Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : +Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : ```html <form> diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md index 22250ac4cf..769f4ae2d2 100644 --- a/files/fr/web/html/element/input/email/index.md +++ b/files/fr/web/html/element/input/email/index.md @@ -290,7 +290,7 @@ C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir unique ## Exemples -Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. +Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. @@ -338,7 +338,7 @@ L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permett {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md index 8d329673d4..7f9e702da0 100644 --- a/files/fr/web/html/element/input/file/index.md +++ b/files/fr/web/html/element/input/file/index.md @@ -80,7 +80,7 @@ Un identifiant de type de fichier est une chaîne de caractères qui décrit le - Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`. - Un type MIME valide, sans extension. - La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio » -- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » +- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » - La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ». L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire : @@ -125,7 +125,7 @@ Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajout ### Obtenir des informations sur les fichiers sélectionnés -Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. +Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. Chaque objet `File` contient les informations suivantes : diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md index 03ffa06680..44772647af 100644 --- a/files/fr/web/html/element/input/image/index.md +++ b/files/fr/web/html/element/input/image/index.md @@ -58,7 +58,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md index ccbdcb79bc..35adc2c7eb 100644 --- a/files/fr/web/html/element/input/index.md +++ b/files/fr/web/html/element/input/index.md @@ -25,7 +25,7 @@ Les types de champs disponibles sont : - `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini. - `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur - `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur. -- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). +- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). - `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire). - `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique. - `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés. @@ -122,7 +122,7 @@ L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire. -Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : +Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : ```js let form = document.querySelector("form"); diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md index 3099a4465e..b4e3a11e68 100644 --- a/files/fr/web/html/element/input/password/index.md +++ b/files/fr/web/html/element/input/password/index.md @@ -252,7 +252,7 @@ L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite l <td> {{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} - et + et {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} </td> </tr> diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index eb985953b5..377e4c12c2 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -18,7 +18,7 @@ Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il uti ## Valeur -L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : +L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : ```js defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min @@ -106,7 +106,7 @@ Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans a ### Ajouter des marques et des étiquettes -La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. +La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. #### Aperçus @@ -278,9 +278,9 @@ Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément ```css .slider-wrapper { display: inline-block; - width: 20px; - height: 150px; - padding: 0; + width: 20px; + height: 150px; + padding: 0; } ``` @@ -288,11 +288,11 @@ Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'e ```css .slider-wrapper input { - width: 150px; - height: 20px; - margin: 0; - transform-origin: 75px 75px; - transform: rotate(-90deg); + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); } ``` diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md index c05051aea7..1e429b0cab 100644 --- a/files/fr/web/html/element/input/reset/index.md +++ b/files/fr/web/html/element/input/reset/index.md @@ -122,7 +122,7 @@ Aucune fonctionnalité de vérification native côté client n'est implémentée <tr> <td><strong>Attributs pris en charge</strong></td> <td> - {{htmlattrxref("type", "input")}} et + {{htmlattrxref("type", "input")}} et {{htmlattrxref("value", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index a7bfd39ab4..c90ac45edc 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -376,7 +376,7 @@ Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [ {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> <tr> diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md index 01d495d09b..3899db3da1 100644 --- a/files/fr/web/html/element/input/submit/index.md +++ b/files/fr/web/html/element/input/submit/index.md @@ -60,7 +60,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md index 5b503a511e..02fdce9c4e 100644 --- a/files/fr/web/html/element/input/tel/index.md +++ b/files/fr/web/html/element/input/tel/index.md @@ -112,7 +112,7 @@ Dans l'exemple suivant, on a un contrôle `"tel"` avec un attribut `placeholder` ```html <input id="telNo" name="telNo" type="tel" - placeholder="01 23 45 67 89"> + placeholder="01 23 45 67 89"> ``` {{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} @@ -127,7 +127,7 @@ La taille physique de la boîte de saisie peut être contrôlée avec l'attribut ```html <input id="telNo" name="telNo" type="tel" - size="20"> + size="20"> ``` {{EmbedLiveSample('La_taille_physique', 600, 40)}} @@ -140,7 +140,7 @@ Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de larg ```html <input id="telNo" name="telNo" type="tel" - size="20" minlength="9" maxlength="14"> + size="20" minlength="9" maxlength="14"> ``` {{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} @@ -153,29 +153,29 @@ Il est possible de fournir une valeur par défaut en renseignant au préalable l ```html <input id="telNo" name="telNo" type="tel" - value="01 23 45 67 89"> + value="01 23 45 67 89"> ``` {{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}} #### Afficher des suggestions -Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. +Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. ```html <input id="telNo" name="telNo" type="tel" list="defaultTels"> <datalist id="defaultTels"> - <option value="01 23 45 67 89"> - <option value="02 45 67 89 01"> - <option value="03 45 67 89 12"> - <option value="04 56 87 98 32"> + <option value="01 23 45 67 89"> + <option value="02 45 67 89 01"> + <option value="03 45 67 89 12"> + <option value="04 56 87 98 32"> </datalist> ``` {{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}} -Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. +Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. ## Validation diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md index 1b616957e4..a6f1e700d6 100644 --- a/files/fr/web/html/element/input/text/index.md +++ b/files/fr/web/html/element/input/text/index.md @@ -52,7 +52,7 @@ Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validatio ### {{htmlattrdef("pattern")}} -L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. @@ -64,9 +64,9 @@ Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). +Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). -> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. ### {{htmlattrdef("readonly")}} @@ -360,7 +360,7 @@ En plus des exemples précédents, vous pouvez consulter les articles [Un premie {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md index e9f7950ab4..af6b05d62e 100644 --- a/files/fr/web/html/element/input/url/index.md +++ b/files/fr/web/html/element/input/url/index.md @@ -302,7 +302,7 @@ En plus des exemples précédents, vous pouvez consulter [l'exemple de validatio {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/ins/index.md b/files/fr/web/html/element/ins/index.md index 146372cb9a..a94a3397e2 100644 --- a/files/fr/web/html/element/ins/index.md +++ b/files/fr/web/html/element/ins/index.md @@ -126,9 +126,9 @@ Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment c | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/kbd/index.md b/files/fr/web/html/element/kbd/index.md index b29e821b08..86cab0a72c 100644 --- a/files/fr/web/html/element/kbd/index.md +++ b/files/fr/web/html/element/kbd/index.md @@ -10,9 +10,9 @@ translation_of: Web/HTML/Element/kbd --- {{HTMLRef}} -L'élément HTML **`<kbd>`** représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML. +L'élément HTML **`<kbd>`** représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML. -`<kbd>` peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels. +`<kbd>` peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels. {{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}} @@ -25,7 +25,7 @@ Cet élément ne contient que [les attributs universels](/fr/docs/Web/HTML/Attri D'autres éléments peuvent être utilisés en association avec `<kbd>` afin de représenter certains scénarios plus spécifiques : - Imbriquer un élément `<kbd>` dans un autre élément `<kbd>` représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après. -- Imbriquer un élément `<kbd>` dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après. +- Imbriquer un élément `<kbd>` dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après. - Imbriquer un élément `<samp>` dans un élément `<kbd>` permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après.. > **Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site. @@ -75,7 +75,7 @@ On peut alors ajouter un peu de CSS : ##### CSS -On ajoute un règle pour les les éléments `<kbd>` avec la classe `"key"` afin de représenter les touches d'un clavier : +On ajoute un règle pour les les éléments `<kbd>` avec la classe `"key"` afin de représenter les touches d'un clavier : ```css kbd.key { @@ -123,7 +123,7 @@ En imbriquant un élément `<kbd>` dans un élément {{HTMLElement("samp")}}, on ### Représenter les options de saisies à l'écran -Imbriquer un élément `<samp>` dans un élément `<kbd>` représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.). +Imbriquer un élément `<samp>` dans un élément `<kbd>` représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.). #### HTML diff --git a/files/fr/web/html/element/keygen/index.md b/files/fr/web/html/element/keygen/index.md index a74f6f7836..19c963d0c9 100644 --- a/files/fr/web/html/element/keygen/index.md +++ b/files/fr/web/html/element/keygen/index.md @@ -63,7 +63,7 @@ SignedPublicKeyAndChallenge ::= SEQUENCE { } ``` -La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut `name` de l'élément `keygen`. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle. +La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut `name` de l'élément `keygen`. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle. Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP : diff --git a/files/fr/web/html/element/legend/index.md b/files/fr/web/html/element/legend/index.md index 6d4d6157ea..1821e8e31b 100644 --- a/files/fr/web/html/element/legend/index.md +++ b/files/fr/web/html/element/legend/index.md @@ -91,7 +91,7 @@ Cet élément contient uniquement [les attributs universels](/fr/docs/Web/HTML/A | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------- | | {{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML WHATWG")}} | Définition de l'élément `legend`. | -| {{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML5 W3C")}} | | +| {{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML5 W3C")}} | | | {{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}} | {{Spec2("HTML4.01")}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/link/index.md b/files/fr/web/html/element/link/index.md index 10791594c9..30d0b07772 100644 --- a/files/fr/web/html/element/link/index.md +++ b/files/fr/web/html/element/link/index.md @@ -20,7 +20,7 @@ Pour lier une feuille de style externe, on inclut un élément `<link>` de la fo <link href="main.css" rel="stylesheet"> ``` -Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut `href`, l'attribut `rel` possède une valeur `stylesheet` qui indique que c'est une feuille de style. `rel` signifie _relationship_ qui correspond donc à la relation entre la ressource et le document courant. Il existe de [nombreux types de liens possibles](/fr/docs/Web/HTML/Types_de_lien). +Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut `href`, l'attribut `rel` possède une valeur `stylesheet` qui indique que c'est une feuille de style. `rel` signifie _relationship_ qui correspond donc à la relation entre la ressource et le document courant. Il existe de [nombreux types de liens possibles](/fr/docs/Web/HTML/Types_de_lien). Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera : diff --git a/files/fr/web/html/element/main/index.md b/files/fr/web/html/element/main/index.md index 40023666b2..854ab621f4 100644 --- a/files/fr/web/html/element/main/index.md +++ b/files/fr/web/html/element/main/index.md @@ -142,13 +142,13 @@ Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence <tr> <th scope="row">Rôles ARIA autorisés</th> <td> - Le rôle <code>main</code> est appliqué à <code><main></code> par - défaut, et le rôle <code + Le rôle <code>main</code> est appliqué à <code><main></code> par + défaut, et le rôle <code ><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" >presentation</a ></code - > est également autorisé. + > est également autorisé. </td> </tr> <tr> diff --git a/files/fr/web/html/element/map/index.md b/files/fr/web/html/element/map/index.md index 00b11aba9f..f95e7ab3e3 100644 --- a/files/fr/web/html/element/map/index.md +++ b/files/fr/web/html/element/map/index.md @@ -39,9 +39,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ### Résultat attendu -L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) : +L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) : -_Pour le lien `left.html` :_ +_Pour le lien `left.html` :_  _Pour le lien `right.html` :_ diff --git a/files/fr/web/html/element/mark/index.md b/files/fr/web/html/element/mark/index.md index 73cf9f4c98..49beaed20c 100644 --- a/files/fr/web/html/element/mark/index.md +++ b/files/fr/web/html/element/mark/index.md @@ -20,7 +20,7 @@ Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Att ## **Notes d'utilisation** -- Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important. +- Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important. - Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier). - `<mark>` ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé. - `<mark>` ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte _importants_ alors que `<mark>` est utilisé afin d'indiquer des fragments de texte _pertinents_. @@ -151,8 +151,8 @@ Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment c | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','<mark>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','<mark>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/meta/index.md b/files/fr/web/html/element/meta/index.md index b920607777..340b68dda0 100644 --- a/files/fr/web/html/element/meta/index.md +++ b/files/fr/web/html/element/meta/index.md @@ -31,7 +31,7 @@ Comme tous les autres éléments, cet élément inclut [les attributs universels > > - Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur). > - L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les **512 premiers octets de la page**. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page. - > - L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'[algorithme déterminant le jeu de caractères](https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm) à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément. + > - L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'[algorithme déterminant le jeu de caractères](https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm) à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément. > - Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la [technique XSS de recours à UTF-7](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)). Toujours renseigner cet élément meta protégera contre ces dangers. > - L'élément {{HTMLElement("meta")}} est un synonyme de `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` utilisé avant HTML5. Ici *`IANAcharset`* correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée. diff --git a/files/fr/web/html/element/meter/index.md b/files/fr/web/html/element/meter/index.md index 722df5fec1..e35e000567 100644 --- a/files/fr/web/html/element/meter/index.md +++ b/files/fr/web/html/element/meter/index.md @@ -145,7 +145,7 @@ On remarquera ici que l'attribut `min` est absent (ce qui est autorisé), la val | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/nav/index.md b/files/fr/web/html/element/nav/index.md index e4d7c0b138..dabc4cd901 100644 --- a/files/fr/web/html/element/nav/index.md +++ b/files/fr/web/html/element/nav/index.md @@ -21,7 +21,7 @@ Cet élément ne possède que [les attributs universels](/fr/docs/Web/HTML/Globa ## Notes d'utilisation - Tous les liens d'un document ne doivent pas faire partie d'un élément `<nav>`. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}. -- Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut [`aria-labelledby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) pourra être utilisé afin d'améliorer l'accessibilité. +- Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut [`aria-labelledby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) pourra être utilisé afin d'améliorer l'accessibilité. - Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation. ## Exemples diff --git a/files/fr/web/html/element/noframes/index.md b/files/fr/web/html/element/noframes/index.md index 7ec076390b..1acb550d1d 100644 --- a/files/fr/web/html/element/noframes/index.md +++ b/files/fr/web/html/element/noframes/index.md @@ -48,8 +48,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('HTML5 W3C', '#noframes', 'noframes')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML5 W3C', '#noframes', 'noframes')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/object/index.md b/files/fr/web/html/element/object/index.md index 5176c44c3d..6f6e10cef8 100644 --- a/files/fr/web/html/element/object/index.md +++ b/files/fr/web/html/element/object/index.md @@ -21,13 +21,13 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - {{htmlattrdef("data")}} - : L'adresse de la ressource, une URL valide. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. - {{htmlattrdef("form")}} {{HTMLVersionInline(5)}} - - : L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. + - : L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. - {{htmlattrdef("height")}} - : La hauteur de la ressource à afficher, exprimée en pixels [CSS](/fr/docs/Web/CSS) (uniquement en valeur absolue). - {{htmlattrdef("name")}} - : Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4). - {{htmlattrdef("type")}} - - : Le type MIME de la ressource définie par **`data`**. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. + - : Le type MIME de la ressource définie par **`data`**. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. - {{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}} - : Cet attribut booléen indique si l'attribut `type` doit correspondre [au type MIME](/fr/docs/Glossaire/Type_MIME) de la ressource afin que celle-ci puisse être utilisée. - {{htmlattrdef("usemap")}} @@ -51,7 +51,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive <!----> - {{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}} - - : Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément `<object>` dans la suite du document. En HTML5, il faut répéter l'élément \<object> complètement chaque fois que la ressource est ré-utilisée. + - : Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément `<object>` dans la suite du document. En HTML5, il faut répéter l'élément \<object> complètement chaque fois que la ressource est ré-utilisée. <!----> @@ -66,14 +66,14 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ```html <object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf" - width="500" height="500" typemustmatch> - <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p> + width="500" height="500" typemustmatch> + <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p> </object> <!-- Un exemple avec Flash --> <!-- <object data="animation.swf" type="application/x-shockwave-flash"> - <param name="param11" value="valeurConf"> + <param name="param11" value="valeurConf"> </object> --> ``` @@ -124,7 +124,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive <th scope="row"><dfn>Contenu autorisé</dfn></th> <td> Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par - du + du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent" >contenu transparent.</a @@ -157,9 +157,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '<object>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '<object>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs @@ -168,5 +168,5 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ## Voir aussi - {{HTMLElement("param")}} -- {{HTMLElement("applet")}} {{Obsolete_Inline}} +- {{HTMLElement("applet")}} {{Obsolete_Inline}} - {{HTMLElement("embed")}} diff --git a/files/fr/web/html/element/optgroup/index.md b/files/fr/web/html/element/optgroup/index.md index 0556863ec4..aa4086a53f 100644 --- a/files/fr/web/html/element/optgroup/index.md +++ b/files/fr/web/html/element/optgroup/index.md @@ -94,9 +94,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/output/index.md b/files/fr/web/html/element/output/index.md index dfd6176e9a..6b9329073b 100644 --- a/files/fr/web/html/element/output/index.md +++ b/files/fr/web/html/element/output/index.md @@ -105,8 +105,8 @@ Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/p/index.md b/files/fr/web/html/element/p/index.md index 686f8c678a..b1a54e765a 100644 --- a/files/fr/web/html/element/p/index.md +++ b/files/fr/web/html/element/p/index.md @@ -92,7 +92,7 @@ p { <td> La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un - élément {{HTMLElement("address")}}, + élément {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, diff --git a/files/fr/web/html/element/param/index.md b/files/fr/web/html/element/param/index.md index b0299e19ad..2ea4a47c1c 100644 --- a/files/fr/web/html/element/param/index.md +++ b/files/fr/web/html/element/param/index.md @@ -88,9 +88,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '<param>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '<param>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/picture/index.md b/files/fr/web/html/element/picture/index.md index 99675b83d5..0a23921ab5 100644 --- a/files/fr/web/html/element/picture/index.md +++ b/files/fr/web/html/element/picture/index.md @@ -51,7 +51,7 @@ L'attribut `media` de l'élément {{HTMLElement("source")}} permet de rédiger u L'attribut `type` d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut `srcset`. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré. ```html -<picture> +<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture> diff --git a/files/fr/web/html/element/pre/index.md b/files/fr/web/html/element/pre/index.md index 882a1245eb..797be4d7c3 100644 --- a/files/fr/web/html/element/pre/index.md +++ b/files/fr/web/html/element/pre/index.md @@ -34,7 +34,7 @@ Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Att ```html <pre> body { - color:red; + color:red; } </pre> ``` @@ -129,7 +129,7 @@ Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '<pre>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification majure depuis {{SpecName("HTML5 W3C")}} | | {{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}} | {{Spec2('HTML5 W3C')}} | Aucune modification majeure depuis {{SpecName("HTML4.01")}}. | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}} | {{Spec2('HTML4.01')}} | Dépréciation de l'attribut `cols`. | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}} | {{Spec2('HTML4.01')}} | Dépréciation de l'attribut `cols`. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/progress/index.md b/files/fr/web/html/element/progress/index.md index d5335cb80b..54668f27ba 100644 --- a/files/fr/web/html/element/progress/index.md +++ b/files/fr/web/html/element/progress/index.md @@ -21,7 +21,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - {{htmlattrdef("max")}} - : Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut `max` est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1. - {{htmlattrdef("value")}} - - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra). + - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra). > **Note :** La valeur minimale est toujours 0 et il n'existe pas d'attribut `min` pour l'élément `progress`. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement. > La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser `element.removeAttribute("value")`. @@ -101,7 +101,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/q/index.md b/files/fr/web/html/element/q/index.md index 93b71f9b99..d134876a3c 100644 --- a/files/fr/web/html/element/q/index.md +++ b/files/fr/web/html/element/q/index.md @@ -102,8 +102,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML5 W3C')}} | | | {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}} | {{Spec2('HTML4.01')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rb/index.md b/files/fr/web/html/element/rb/index.md index 983f583aa2..8d07bf9aed 100644 --- a/files/fr/web/html/element/rb/index.md +++ b/files/fr/web/html/element/rb/index.md @@ -126,7 +126,7 @@ body { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rp/index.md b/files/fr/web/html/element/rp/index.md index f409064ab9..062d1cc092 100644 --- a/files/fr/web/html/element/rp/index.md +++ b/files/fr/web/html/element/rp/index.md @@ -117,8 +117,8 @@ body { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rtc/index.md b/files/fr/web/html/element/rtc/index.md index 1dcf28e6d3..59159a4ef1 100644 --- a/files/fr/web/html/element/rtc/index.md +++ b/files/fr/web/html/element/rtc/index.md @@ -96,9 +96,9 @@ Cet élément peut utiliser [les attributs universels](/fr/docs/Web/HTML/Attribu | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.3')}} | | -| {{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.2')}} | | -| {{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.3')}} | | +| {{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.2')}} | | +| {{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/ruby/index.md b/files/fr/web/html/element/ruby/index.md index a602a5e216..9e1a917fcd 100644 --- a/files/fr/web/html/element/ruby/index.md +++ b/files/fr/web/html/element/ruby/index.md @@ -91,7 +91,7 @@ Cet élément inclut uniquement les [attributs globaux](/fr/docs/Web/HTML/Global <tr> <th scope="row">Parents autorisés</th> <td> - Tout élément qui accepte du <a + Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" >contenu de phrasé</a >. diff --git a/files/fr/web/html/element/samp/index.md b/files/fr/web/html/element/samp/index.md index 613be3c1b4..5c0b5eb9c6 100644 --- a/files/fr/web/html/element/samp/index.md +++ b/files/fr/web/html/element/samp/index.md @@ -153,9 +153,9 @@ Cela permet simplement de colorer légèrement l'invite et le curseur. On utilis | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/strong/index.md b/files/fr/web/html/element/strong/index.md index 78ffce0b02..203ee65db7 100644 --- a/files/fr/web/html/element/strong/index.md +++ b/files/fr/web/html/element/strong/index.md @@ -36,7 +36,7 @@ Il est important de savoir que `<b></b>` ne doit pas être utilisé, à part dan ### `<em>` ou `<strong>` ? -En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (`<em>` étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple : « J'_adore_ les licornes » et « J'adore les _licornes_ ». `<strong>` est utilisé pour augmenter l'importance de certaines portions de phrases : « **Attention !** C'est **très dangereux** ». `<strong>` et `<em>` peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte. +En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (`<em>` étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple : « J'_adore_ les licornes » et « J'adore les _licornes_ ». `<strong>` est utilisé pour augmenter l'importance de certaines portions de phrases : « **Attention !** C'est **très dangereux** ». `<strong>` et `<em>` peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte. ## Exemples @@ -128,9 +128,9 @@ En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l' | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/style/index.md b/files/fr/web/html/element/style/index.md index 5c56e54df2..5017a7b4da 100644 --- a/files/fr/web/html/element/style/index.md +++ b/files/fr/web/html/element/style/index.md @@ -187,7 +187,7 @@ Dans cet exemple (basé sur le précédent), on ajoute un attribut `media` sur l | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | | {{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}} | {{Spec2('HTML WHATWG')}} | Ajout de l'attribut `nonce`. | | {{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}} | {{Spec2('HTML5 W3C')}} | L'attribut `type` devient optionnel. | -| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/sub/index.md b/files/fr/web/html/element/sub/index.md index 013da8b555..abed446237 100644 --- a/files/fr/web/html/element/sub/index.md +++ b/files/fr/web/html/element/sub/index.md @@ -140,8 +140,8 @@ Voici certains cas d'utilisation (non exhaustifs) pour `<sub>` : | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/sup/index.md b/files/fr/web/html/element/sup/index.md index e5479ece4f..92bb36d2e6 100644 --- a/files/fr/web/html/element/sup/index.md +++ b/files/fr/web/html/element/sup/index.md @@ -158,8 +158,8 @@ Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/table/index.md b/files/fr/web/html/element/table/index.md index 1ebc3e3868..b7ba1cf0d7 100644 --- a/files/fr/web/html/element/table/index.md +++ b/files/fr/web/html/element/table/index.md @@ -73,7 +73,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - : Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes : - `none`, les traits ne doivent pas être affichés, c'est la valeur par défaut - - `groups`, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}}) et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}}) + - `groups`, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}}) et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}}) - `rows`, les traits seront affichées entre les lignes du tableau - `columns`, les lignes seront affichées entre les colonnes du tableau - `all`, tous les traits seront affichés (entre les lignes et entre les colonnes). @@ -288,7 +288,7 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h - [Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision](/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants) - [Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/multi-level/) -- [H43 : Utiliser les attributs `id` et `headers` afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H43.html) +- [H43 : Utiliser les attributs `id` et `headers` afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H43.html) ## Résumé technique @@ -322,7 +322,7 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h L'un ou l'autre de ces deux cas de figure : <ul> <li> - zéro ou plusieurs éléments {{HTMLElement("tbody")}} + zéro ou plusieurs éléments {{HTMLElement("tbody")}} </li> <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li> </ul> @@ -354,8 +354,8 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/td/index.md b/files/fr/web/html/element/td/index.md index 51ee3ad3b7..e1503d3a49 100644 --- a/files/fr/web/html/element/td/index.md +++ b/files/fr/web/html/element/td/index.md @@ -21,7 +21,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - {{htmlattrdef("colspan")}} - - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). + - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). > **Note :** En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car [il ne doit pas être utilisé pour faire chevaucher des cellules](https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan). Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}. @@ -46,7 +46,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -68,51 +68,51 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ <table> <tbody> <tr> - <td> </td> + <td></td> <td><code>black</code> = "#000000"</td> - <td> </td> + <td></td> <td><code>green</code> = "#008000"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>silver</code> = "#C0C0C0"</td> - <td> </td> + <td></td> <td><code>lime</code> = "#00FF00"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>gray</code> = "#808080"</td> - <td> </td> + <td></td> <td><code>olive</code> = "#808000"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>white</code> = "#FFFFFF"</td> - <td> </td> + <td></td> <td><code>yellow</code> = "#FFFF00"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>maroon</code> = "#800000"</td> - <td> </td> + <td></td> <td><code>navy</code> = "#000080"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>red</code> = "#FF0000"</td> - <td> </td> + <td></td> <td><code>blue</code> = "#0000FF"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>purple</code> = "#800080"</td> - <td> </td> + <td></td> <td><code>teal</code> = "#008080"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>fuchsia</code> = "#FF00FF"</td> - <td> </td> + <td></td> <td> <p><code>aqua</code> = "#00FFFF"</p> </td> @@ -199,7 +199,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ <th scope="row">Omission de balises</th> <td> La balise de début est obligatoire. La balise de fin peut être absente - si l'élément est immédiatement suivi par un élément + si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}} ou s'il n'y a plus aucune donnée dans l'élément parent. </td> @@ -223,8 +223,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/textarea/index.md b/files/fr/web/html/element/textarea/index.md index 60901cd5ca..8655ce394e 100644 --- a/files/fr/web/html/element/textarea/index.md +++ b/files/fr/web/html/element/textarea/index.md @@ -231,9 +231,9 @@ Cet exemple affiche deux éléments `<textarea>` : le premier est désactivé av | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/tfoot/index.md b/files/fr/web/html/element/tfoot/index.md index 86fa4aa230..8c3a7e15de 100644 --- a/files/fr/web/html/element/tfoot/index.md +++ b/files/fr/web/html/element/tfoot/index.md @@ -29,7 +29,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -79,7 +79,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ </tbody> </table> - > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. + > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. - {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}} @@ -193,8 +193,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/th/index.md b/files/fr/web/html/element/th/index.md index 18236440e1..9ca7680711 100644 --- a/files/fr/web/html/element/th/index.md +++ b/files/fr/web/html/element/th/index.md @@ -22,7 +22,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - {{htmlattrdef("abbr")}} - : Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même. - {{htmlattrdef("colspan")}} - - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000. + - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000. - {{htmlattrdef("headers")}} - : Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut `id` de l'élément {{HTMLElement("th")}} qui s'applique à cet élément. - {{htmlattrdef("rowspan")}} @@ -47,7 +47,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -176,8 +176,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/thead/index.md b/files/fr/web/html/element/thead/index.md index e739de828b..9b82ab4240 100644 --- a/files/fr/web/html/element/thead/index.md +++ b/files/fr/web/html/element/thead/index.md @@ -29,7 +29,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -42,7 +42,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé. - > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **bgcolor**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. + > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **bgcolor**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. - {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}} @@ -152,8 +152,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/title/index.md b/files/fr/web/html/element/title/index.md index a8262f98ef..45b4ec4d76 100644 --- a/files/fr/web/html/element/title/index.md +++ b/files/fr/web/html/element/title/index.md @@ -112,9 +112,9 @@ Mettre à jour la valeur de `title` afin de refléter un changement d'état impo | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/track/index.md b/files/fr/web/html/element/track/index.md index fabc4ea2a2..8f07ff3429 100644 --- a/files/fr/web/html/element/track/index.md +++ b/files/fr/web/html/element/track/index.md @@ -32,7 +32,7 @@ L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément - `captions` - - La piste est une retransciption voire une traduction de la partie audio du média. + - La piste est une retransciption voire une traduction de la partie audio du média. - La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.). - Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé. diff --git a/files/fr/web/html/element/u/index.md b/files/fr/web/html/element/u/index.md index 1ed27bb44b..31868c50ed 100644 --- a/files/fr/web/html/element/u/index.md +++ b/files/fr/web/html/element/u/index.md @@ -82,7 +82,7 @@ La plupart du temps, ce n'est pas l'élément `<u>` qu'il faut utiliser. Voici q #### Souligner pour la simple mise en forme -Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur `"underline"` : +Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur `"underline"` : ##### HTML @@ -189,5 +189,5 @@ Les titres de livres doivent être indiqués avec un élément {{HTMLElement("ci ## Voir aussi -- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`. +- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`. - La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément `<u>`. diff --git a/files/fr/web/html/element/var/index.md b/files/fr/web/html/element/var/index.md index 978481d992..82f3bfd85b 100644 --- a/files/fr/web/html/element/var/index.md +++ b/files/fr/web/html/element/var/index.md @@ -141,8 +141,8 @@ var { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.md b/files/fr/web/html/global_attributes/autocapitalize/index.md index d562b10ce6..3f5accc1fe 100644 --- a/files/fr/web/html/global_attributes/autocapitalize/index.md +++ b/files/fr/web/html/global_attributes/autocapitalize/index.md @@ -26,7 +26,7 @@ L'attribut `autocapitalize` n'entraînera pas de mise en majuscule automatique p | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/class/index.md b/files/fr/web/html/global_attributes/class/index.md index cd398b7af3..35e32de2c6 100644 --- a/files/fr/web/html/global_attributes/class/index.md +++ b/files/fr/web/html/global_attributes/class/index.md @@ -23,7 +23,7 @@ Bien que la spécification ne précise aucune contrainte quant aux noms utilisé | ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "dom.html#classes", "class")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}. | | {{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}} | {{Spec2('HTML5.1')}} | État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#classes", "class")}} | {{Spec2('HTML5 W3C')}} | État selon {{SpecName('HTML WHATWG')}}. `class` est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},. | +| {{SpecName('HTML5 W3C', "dom.html#classes", "class")}} | {{Spec2('HTML5 W3C')}} | État selon {{SpecName('HTML WHATWG')}}. `class` est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},. | | {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}} | {{Spec2('HTML4.01')}} | Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/contextmenu/index.md b/files/fr/web/html/global_attributes/contextmenu/index.md index 5dc068c1cf..2e5b1c7415 100644 --- a/files/fr/web/html/global_attributes/contextmenu/index.md +++ b/files/fr/web/html/global_attributes/contextmenu/index.md @@ -32,18 +32,18 @@ Voici quelques exemples de personnalisations de menus. Le code HTML pourra être </menu> </menu> <ol> - <li> - Dans cet exemple, vous pouvez partager un lien vers - cette page sur Facebook et/ou Twitter via le groupe Partager - du menu contextuel - </li> + <li> + Dans cet exemple, vous pouvez partager un lien vers + cette page sur Facebook et/ou Twitter via le groupe Partager + du menu contextuel + </li> <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> <menu type="context" id="changeFont"> <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> </menu> - <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> + <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> <menu type="context" id="ChangeImage"> <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> diff --git a/files/fr/web/html/global_attributes/dir/index.md b/files/fr/web/html/global_attributes/dir/index.md index 837f86e7da..ea0e2e94e2 100644 --- a/files/fr/web/html/global_attributes/dir/index.md +++ b/files/fr/web/html/global_attributes/dir/index.md @@ -19,7 +19,7 @@ Les valeurs autorisées pour cet attribut sont : - `ltr` : qui signifie _left to right_ (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple) - `rtl` : qui signifie _right to left_ (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple) -- `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément. +- `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément. > **Note :** Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente. > diff --git a/files/fr/web/html/global_attributes/draggable/index.md b/files/fr/web/html/global_attributes/draggable/index.md index da6e7cb41a..314eb29c7d 100644 --- a/files/fr/web/html/global_attributes/draggable/index.md +++ b/files/fr/web/html/global_attributes/draggable/index.md @@ -30,7 +30,7 @@ En revanche, on pourra correctement utiliser : <label draggable="true">Label exemple</label> ``` -Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré [dans cet exemple](/fr/docs/Glisser_et_déposer/Opérations_de_glissement). +Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré [dans cet exemple](/fr/docs/Glisser_et_déposer/Opérations_de_glissement). ## Spécifications diff --git a/files/fr/web/html/global_attributes/enterkeyhint/index.md b/files/fr/web/html/global_attributes/enterkeyhint/index.md index 364247dab8..f01e6ee612 100644 --- a/files/fr/web/html/global_attributes/enterkeyhint/index.md +++ b/files/fr/web/html/global_attributes/enterkeyhint/index.md @@ -25,7 +25,7 @@ ou [`pattern`](/fr/docs/Web/HTML/Element/input#htmlattrdefpattern) pour afficher ### Valeurs -L'attribut `enterkeyhint` est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes : +L'attribut `enterkeyhint` est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes : | Valeur | Description | Libellé de l'exemple (dépend de l'agent utilisateur et de la langue) | | ------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | diff --git a/files/fr/web/html/global_attributes/index.md b/files/fr/web/html/global_attributes/index.md index bc41e64456..94d2fc05ad 100644 --- a/files/fr/web/html/global_attributes/index.md +++ b/files/fr/web/html/global_attributes/index.md @@ -88,7 +88,7 @@ En plus des attributs universels HTML, il existe également les attributs univer - {{htmlattrdef("itemref")}} - : Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut `itemscope` contenant une référence vers un `itemref`. `itemref` fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("itemscope")}} - - : `itemscope` fonctionne généralement avec `itemtype` afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. `itemscope` crée l'objet et définit la portée de l'`itemtype` associée. `itemtype` est une URL valide construite à partir d'un vocabulaire (par exemple [schema.org](https://schema.org/)) qui décrit les objets et leurs propriétés. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). + - : `itemscope` fonctionne généralement avec `itemtype` afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. `itemscope` crée l'objet et définit la portée de l'`itemtype` associée. `itemtype` est une URL valide construite à partir d'un vocabulaire (par exemple [schema.org](https://schema.org/)) qui décrit les objets et leurs propriétés. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("itemtype")}} - : Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("lang")}} diff --git a/files/fr/web/html/global_attributes/is/index.md b/files/fr/web/html/global_attributes/is/index.md index 9df0b63838..dbc061d32b 100644 --- a/files/fr/web/html/global_attributes/is/index.md +++ b/files/fr/web/html/global_attributes/is/index.md @@ -44,7 +44,7 @@ customElements.define('word-count', WordCount, { extends: 'p' }); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemid/index.md b/files/fr/web/html/global_attributes/itemid/index.md index 38c6c95ba4..91bc0411a6 100644 --- a/files/fr/web/html/global_attributes/itemid/index.md +++ b/files/fr/web/html/global_attributes/itemid/index.md @@ -74,8 +74,8 @@ Un élément qui décrit un livre : | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#items", "itemid")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#items", "itemid")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemprop/index.md b/files/fr/web/html/global_attributes/itemprop/index.md index b42ef9904e..1cfd77892b 100644 --- a/files/fr/web/html/global_attributes/itemprop/index.md +++ b/files/fr/web/html/global_attributes/itemprop/index.md @@ -12,7 +12,7 @@ original_slug: Web/HTML/Attributs_universels/itemprop --- {{HTMLSidebar("Global_attributes")}} -L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut `itemprop` qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une **propriété** et un groupe de propriété forme un **objet (_item_)**. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}. +L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut `itemprop` qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une **propriété** et un groupe de propriété forme un **objet (_item_)**. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}. ### Un exemple simple @@ -36,7 +36,7 @@ L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** es <table class="standard-table"> <tbody> <tr> - <td colspan="1" rowspan="2"> </td> + <td colspan="1" rowspan="2"> </td> <th colspan="2" rowspan="1"><strong>Objet</strong></th> </tr> <tr> @@ -240,7 +240,7 @@ Une propriété est un ensemble non-ordonné de composants uniques sensibles à <table class="standard-table"> <thead> <tr> - <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="1" rowspan="2" scope="col"> </th> <th colspan="2" rowspan="1" scope="col">Objet</th> </tr> <tr> @@ -408,8 +408,8 @@ Un exemple sur un livre qu'on décrit avec les différents attributs. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemref/index.md b/files/fr/web/html/global_attributes/itemref/index.md index acea015ebe..d811b16eff 100644 --- a/files/fr/web/html/global_attributes/itemref/index.md +++ b/files/fr/web/html/global_attributes/itemref/index.md @@ -34,8 +34,8 @@ L'attribut `itemref` peut uniquement être défini sur des éléments pour lesqu <p id="a">Name: <span itemprop="name">Amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> - <p>Band: <span itemprop="name">Jazz Band</span> </p> - <p>Size: <span itemprop="size">12</span> players</p> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> </div> ``` @@ -59,8 +59,8 @@ Au format [JSON-LD](https://json-ld.org/) : | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemscope/index.md b/files/fr/web/html/global_attributes/itemscope/index.md index 8b7a7c7bc3..a4f61c8e89 100644 --- a/files/fr/web/html/global_attributes/itemscope/index.md +++ b/files/fr/web/html/global_attributes/itemscope/index.md @@ -189,8 +189,8 @@ Directions: <br> | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemtype/index.md b/files/fr/web/html/global_attributes/itemtype/index.md index 4f00351717..4753e6241a 100644 --- a/files/fr/web/html/global_attributes/itemtype/index.md +++ b/files/fr/web/html/global_attributes/itemtype/index.md @@ -15,13 +15,13 @@ original_slug: Web/HTML/Attributs_universels/itemtype L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemtype`** définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. `itemscope` est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif. -L'attribut `itemtype` doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment. +L'attribut `itemtype` doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment. Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme [schema.org](http://schema.org/)) et doivent tous être définis avec le même vocabulaire. L'attribut `itemtype` peut uniquement être défini pour les éléments qui ont un attribut `itemscope`. -Google et les autres moteurs de recherche participent au vocabulaire défini par [schema.org](http://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](http://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](http://schema.org/startDate) et [`location`](http://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent). +Google et les autres moteurs de recherche participent au vocabulaire défini par [schema.org](http://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](http://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](http://schema.org/startDate) et [`location`](http://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent). > **Note :** Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <http://schema.org/Thing> @@ -72,8 +72,8 @@ Google et les autres moteurs de recherche participent au vocabulaire défini pa | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/lang/index.md b/files/fr/web/html/global_attributes/lang/index.md index 1b3bfd1b3d..5f6bad8889 100644 --- a/files/fr/web/html/global_attributes/lang/index.md +++ b/files/fr/web/html/global_attributes/lang/index.md @@ -11,7 +11,7 @@ original_slug: Web/HTML/Attributs_universels/lang --- {{HTMLSidebar("Global_attributes")}} -L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`lang`** permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : [_Les balises d'identification de langues (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). Si cette balise est la chaîne vide, la langue sera définie comme _inconnue_. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme _invalide_. +L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`lang`** permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : [_Les balises d'identification de langues (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). Si cette balise est la chaîne vide, la langue sera définie comme _inconnue_. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme _invalide_. {{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}} @@ -32,7 +32,7 @@ Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées - Sous-balise régionale - : Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, `es-ES` représente l'espagnol parlé en Espagne et `es-013` représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement `es`. -La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : `ru-Cyrl-BY` qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie. +La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : `ru-Cyrl-BY` qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie. ## Spécifications diff --git a/files/fr/web/html/global_attributes/slot/index.md b/files/fr/web/html/global_attributes/slot/index.md index 94dda62360..e47146a5f4 100644 --- a/files/fr/web/html/global_attributes/slot/index.md +++ b/files/fr/web/html/global_attributes/slot/index.md @@ -19,8 +19,8 @@ Pour des exemples d'application, consulter le guide [Utiliser les modèles (_tem | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/link_types/preload/index.md b/files/fr/web/html/link_types/preload/index.md index e53e9481e1..bc4c6fa0b9 100644 --- a/files/fr/web/html/link_types/preload/index.md +++ b/files/fr/web/html/link_types/preload/index.md @@ -10,18 +10,18 @@ La valeur `preload` de l'attribut {{htmlattrxref("rel", "link")}} de l'élément ## Les bases -Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément `<link>` de la manière suivante : +Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément `<link>` de la manière suivante : ```html <link rel="stylesheet" href="styles/main.css"> ``` -Ici, nous allons utiliser la valeur `preload` sur l'attribut `rel`, ce qui transformera l'élément `<link>` en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer : +Ici, nous allons utiliser la valeur `preload` sur l'attribut `rel`, ce qui transformera l'élément `<link>` en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer : -- le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}} ; -- le type de ressource dans l'attribut {{htmlattrxref("as", "link")}} ; +- le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}} ; +- le type de ressource dans l'attribut {{htmlattrxref("as", "link")}} ; -Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css) et le [résultat obtenu](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)) : +Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css) et le [résultat obtenu](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)) : ```html <head> @@ -42,34 +42,34 @@ Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github. </body> ``` -Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le `<link rel="stylesheet">` et le `<script>`, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple : +Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le `<link rel="stylesheet">` et le `<script>`, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple : -- les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images ; -- les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web ; +- les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images ; +- les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web ; - les fichiers image et vidéos plus importants. -`preload` dispose aussi d'autres avantages. L'utilisation de l'attribut `as` pour spécifier le type de contenu à précharger permet au navigateur de : +`preload` dispose aussi d'autres avantages. L'utilisation de l'attribut `as` pour spécifier le type de contenu à précharger permet au navigateur de : -- prioriser les ressources se chargeant avec davantage de précision ; -- les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent ; -- appliquer la bonne [stratégie de sécurité du contenu](/fr/docs/Web/HTTP/CSP) aux ressources ; +- prioriser les ressources se chargeant avec davantage de précision ; +- les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent ; +- appliquer la bonne [stratégie de sécurité du contenu](/fr/docs/Web/HTTP/CSP) aux ressources ; - mettre en place les bons en-têtes de requêtes {{HTTPHeader("Accept")}} pour les ressources. -### Quels types de contenu peuvent être préchargés ? +### Quels types de contenu peuvent être préchargés ? -De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut `as` sont les suivantes : +De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut `as` sont les suivantes : -- `audio` : fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}} ; -- `document` : un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}} ; -- `embed` : une ressource à embarquer dans un élément {{htmlelement("embed")}} ; -- `fetch` : une ressource accessible via une requête `fetch` ou `XHR`, comme un `ArrayBuffer` ou un fichier JSON ; -- `font` : un fichier de police ; -- `image` : un fichier image ; -- `object` : une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}} ; -- `script` : un fichier JavaScript ; -- `style` : une feuille de styles CSS ; -- `track` : un fichier WebVTT ; -- `worker` : un +- `audio` : fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}} ; +- `document` : un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}} ; +- `embed` : une ressource à embarquer dans un élément {{htmlelement("embed")}} ; +- `fetch` : une ressource accessible via une requête `fetch` ou `XHR`, comme un `ArrayBuffer` ou un fichier JSON ; +- `font` : un fichier de police ; +- `image` : un fichier image ; +- `object` : une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}} ; +- `script` : un fichier JavaScript ; +- `style` : une feuille de styles CSS ; +- `track` : un fichier WebVTT ; +- `worker` : un <i lang="en">web worker</i> @@ -77,9 +77,9 @@ De nombreux différents types de contenu peuvent être préchargés. Les valeurs <i lang="en">worker</i> - partagé ; + partagé ; -- `video` : un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}. +- `video` : un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}. > **Note :** le préchargement de l'élément `video` est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs. @@ -89,7 +89,7 @@ De nombreux différents types de contenu peuvent être préchargés. Les valeurs Les éléments `<link>` peuvent accepter un attribut {{htmlattrxref("type", "link")}}, contenant le type MIME de la ressource vers laquelle pointe le document. Ceci est tout spécialement utile lorsque l'on effectue un préchargement des ressources – le navigateur utilisera alors l'attribut `type` pour vérifier s'il prend en charge la ressource et la télécharger si c'est le cas, ou l'ignorer dans le cas contraire. -Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le [code source complet](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video) ou la [version exécutable en direct](https://mdn.github.io/html-examples/link-rel-preload/video/)), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur – cela permet d'illustrer le fonctionnement général du préchargement. +Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le [code source complet](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video) ou la [version exécutable en direct](https://mdn.github.io/html-examples/link-rel-preload/video/)), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur – cela permet d'illustrer le fonctionnement général du préchargement. ```html <head> @@ -113,15 +113,15 @@ Concernant les personnes disposant d'un navigateur prenant en charge tout aussi En conclusion, il est déconseillé de précharger de multiple formats pour la même ressource. La bonne pratique est plutôt de précharger uniquement le type de média qu'utilise la majorité des personnes qui visitent votre site. C'est pourquoi le code fourni en exemple ne précharge pas la vidéo au format `video/webm`. -Cependant, l'absence de préchargement n'empêche pas la vidéo `video/webm` d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format `video/mp4` mais qui prennent en charge le format `video/webm` alors le code de l'exemple permettra toujours d'utiliser la vidéo au format `video/webm` — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs. +Cependant, l'absence de préchargement n'empêche pas la vidéo `video/webm` d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format `video/mp4` mais qui prennent en charge le format `video/webm` alors le code de l'exemple permettra toujours d'utiliser la vidéo au format `video/webm` — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs. ## Récupération de l'activation du <i lang="en">CORS</i> -Lors du préchargement des ressources analysées par des fonctions activant le [CORS](/fr/docs/Web/HTTP/CORS) (partage des ressources entre origines multiples), comme par exemple [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ou [fonts](/fr/docs/Web/CSS/@font-face)), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément [`<link>`](/fr/docs/Web/HTML/Element/link). L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page. +Lors du préchargement des ressources analysées par des fonctions activant le [CORS](/fr/docs/Web/HTTP/CORS) (partage des ressources entre origines multiples), comme par exemple [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ou [fonts](/fr/docs/Web/CSS/@font-face)), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément [`<link>`](/fr/docs/Web/HTML/Element/link). L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page. -Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais : [<i lang="en">Font fetching requirements</i>](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)). +Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais : [<i lang="en">Font fetching requirements</i>](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)). -Voici un cas d'utilisation. Vous trouverez [le code source complet sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts) ainsi qu'une [démonstration](https://mdn.github.io/html-examples/link-rel-preload/fonts/) : +Voici un cas d'utilisation. Vous trouverez [le code source complet sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts) ainsi qu'une [démonstration](https://mdn.github.io/html-examples/link-rel-preload/fonts/) : ```html <head> @@ -142,9 +142,9 @@ En plus de fournir un type MIME avec l'attribut `type`, ce code utilise un attri ## Inclure des médias -Une autre belle fonctionnalité de l'élément `<link>` concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de [types de médias](/fr/docs/Web/CSS/@media#media_types) ou encore des [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i> ! +Une autre belle fonctionnalité de l'élément `<link>` concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de [types de médias](/fr/docs/Web/CSS/@media#media_types) ou encore des [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i> ! -Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media) ou étudier un [exemple de démonstration](https://mdn.github.io/html-examples/link-rel-preload/media/) : +Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media) ou étudier un [exemple de démonstration](https://mdn.github.io/html-examples/link-rel-preload/media/) : ```html <head> @@ -176,13 +176,13 @@ Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://git Dans cet exemple nous incluons les attributs `media` dans notre élément `<link>` pour qu'une image plus fine soit préchargée si la personne visitant le site dispose d'un écran plus petit, et pour qu'une image plus large soit chargée sur les écrans plus larges. Pour cela, nous utilisons {{domxref("Window.matchMedia")}} et {{domxref("MediaQueryList")}} (consultez la page [Tester les requêtes média en JavaScript](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries) pour en savoir plus). -Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit « flash de texte sans mis en forme » en français). +Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit « flash de texte sans mis en forme » en français). -Il sera dommage de limiter le préchargement aux images, voyez plus loin ! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes. +Il sera dommage de limiter le préchargement aux images, voyez plus loin ! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes. ## Scripts et préchargement -Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i> : +Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i> : ```js var preloadLink = document.createElement("link"); @@ -192,7 +192,7 @@ preloadLink.as = "script"; document.head.appendChild(preloadLink); ``` -Cela signifie que le navigateur va précharger le fichier `myscript.js`, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci : +Cela signifie que le navigateur va précharger le fichier `myscript.js`, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci : ```js var preloadedScript = document.createElement("script"); @@ -204,11 +204,11 @@ C'est utile lorsque vous voulez précharger un script mais repousser son exécut ## Autres ressources concernant les mécanismes de préchargement -D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que `<link rel="preload">`. En voici la liste : +D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que `<link rel="preload">`. En voici la liste : -- `<link rel="prefetch">` est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la **_prochaine_** page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement ! Par ailleurs, les navigateurs donnent une priorité plus faible à `prefetch` qu'à `preload` — la page courante est prioritaire par rapport à la page suivante. Consultez la [FAQ sur le préchargement des liens](/fr/docs/Web/HTTP/Link_prefetching_FAQ) pour plus de détails ; -- `<link rel="prerender">` effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction `prerender` comme une instruction [NoState prefetch](https://developers.google.com/web/updates/2018/07/nostate-prefetch) ; -- `<link rel="subresource">` {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que `preload`, mais il y avait un problème : il n'y avait aucun moyen de définir une priorité sur les éléments à charger (`as` n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible) ; +- `<link rel="prefetch">` est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la **_prochaine_** page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement ! Par ailleurs, les navigateurs donnent une priorité plus faible à `prefetch` qu'à `preload` — la page courante est prioritaire par rapport à la page suivante. Consultez la [FAQ sur le préchargement des liens](/fr/docs/Web/HTTP/Link_prefetching_FAQ) pour plus de détails ; +- `<link rel="prerender">` effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction `prerender` comme une instruction [NoState prefetch](https://developers.google.com/web/updates/2018/07/nostate-prefetch) ; +- `<link rel="subresource">` {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que `preload`, mais il y avait un problème : il n'y avait aucun moyen de définir une priorité sur les éléments à charger (`as` n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible) ; - Il y a un grand nombre de scripts de chargements de ressources disponibles un peu partout, mais aucun ne peut avoir la puissance d'une file de priorisation gérée directement par le navigateur. De plus, ces scripts sont sujets à des problèmes de performances similaires. ## Spécifications diff --git a/files/fr/web/html/viewport_meta_tag/index.md b/files/fr/web/html/viewport_meta_tag/index.md index db05d1c670..2462aa764c 100644 --- a/files/fr/web/html/viewport_meta_tag/index.md +++ b/files/fr/web/html/viewport_meta_tag/index.md @@ -22,7 +22,7 @@ En effet, de nombreuses pages ne sont pas optimisées pour les mobiles et ne fon Cependant, ce mécanisme n'est pas aussi bon pour les pages qui sont optimisées pour les écrans étroits à l'aide de [_media queries_](/fr/docs/Web/CSS/Media_Queries) - si le viewport virtuel est de 980px par exemple, les media queries qui se déclenchent à 640px, 480px ou moins ne seront jamais utilisées, ce qui limite l'efficacité de ces techniques de _responsive design_. -Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) (en) d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs. +Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) (en) d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs. Pour en savoir plus sur les fenêtres d'affichage dans les différents navigateurs mobiles, consultez [A Tale of Two Viewports](http://www.quirksmode.org/mobile/viewports2.html) sur quirksmode.org. @@ -64,7 +64,7 @@ Pour les pages qui définissent une échelle initiale ou maximale, cela signifie Les autres [attributs](/fr/docs/Web/HTML/Element/meta#attributes) disponibles sont `minimum-scale`, `maximum-scale` et `user-scalable`. Ces propriétés affectent l'échelle et la largeur initiales, ainsi que la limitation des changements de niveau de zoom. -Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur `maximum-scale` pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant : +Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur `maximum-scale` pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant : ```html <meta name="viewport" content="initial-scale=1, maximum-scale=1"> diff --git a/files/fr/web/http/basics_of_http/mime_types/index.md b/files/fr/web/http/basics_of_http/mime_types/index.md index 68fc3c23e8..ee3fcec41d 100644 --- a/files/fr/web/http/basics_of_http/mime_types/index.md +++ b/files/fr/web/http/basics_of_http/mime_types/index.md @@ -262,7 +262,7 @@ Lorsque le type MIME est absent ou lorsque le client détecte que le type MIME a Les types MIME ne sont pas la seule façon existante pour gérer le format d'un document : - Les extensions de fichiers sont parfois utilisées, comme sur les systèmes d'exploitation Microsoft Windows. Tous les systèmes d'exploitation ne considèrent pas l'extension comme signifiante (en particulier Linux et Mac OS). De la même manière que pour les types MIME externes, il n'est pas garanti que le contenu soit effectivement du type correspondant à l'extension du document. -- Nombres magiques : La syntaxe de différents fichiers permet de déterminer le fichier en analysant son contenu, ainsi les fichiers GIF commencent par les valeurs hexadécimales 47 49 46 38 soit \[GIF89], les fichiers PNG quant à eux commencent par 89 50 4E 47 soit \[.PNG]. Néanmoins, tous les types de fichiers ne permettent pas d'utiliser des nombres magiques, il ne s'agit donc pas d'une technique infaillible. +- Nombres magiques : La syntaxe de différents fichiers permet de déterminer le fichier en analysant son contenu, ainsi les fichiers GIF commencent par les valeurs hexadécimales 47 49 46 38 soit \[GIF89], les fichiers PNG quant à eux commencent par 89 50 4E 47 soit \[.PNG]. Néanmoins, tous les types de fichiers ne permettent pas d'utiliser des nombres magiques, il ne s'agit donc pas d'une technique infaillible. ## Voir aussi diff --git a/files/fr/web/http/browser_detection_using_the_user_agent/index.md b/files/fr/web/http/browser_detection_using_the_user_agent/index.md index e6adc3710d..c837916e17 100644 --- a/files/fr/web/http/browser_detection_using_the_user_agent/index.md +++ b/files/fr/web/http/browser_detection_using_the_user_agent/index.md @@ -46,9 +46,9 @@ C'est la partie difficile, puisque les différentes sections de la chaîne User- ### Nom du navigateur -Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page. +Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page. -La plupart des navigateurs notent leur nom et version suivant le format _NomDuNavigateur/NuméroDeVersion_, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox. +La plupart des navigateurs notent leur nom et version suivant le format _NomDuNavigateur/NuméroDeVersion_, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox. Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko". @@ -66,25 +66,25 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <td>Firefox</td> <td>Firefox/xyz</td> <td>Seamonkey/xyz</td> - <td> </td> + <td></td> </tr> <tr> <td>Seamonkey</td> <td>Seamonkey/xyz</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Chrome</td> <td>Chrome/xyz</td> <td>Chromium/xyz</td> - <td> </td> + <td></td> </tr> <tr> <td>Chromium</td> <td>Chromium/xyz</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Safari</td> @@ -101,7 +101,7 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <p>OPR/xyz></p> <p>Opera/xyz</p> </td> - <td> </td> + <td></td> <td> <p>Opera 15+ (moteur de rendu Blink)</p> <p>Opera 12- (moteur de rendu Presto)</p> @@ -110,7 +110,7 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <tr> <td>Internet Explorer</td> <td>;MSIE xyz;</td> - <td> </td> + <td></td> <td> Internet Explorer n'utilise pas le format <em>NomDuNavigateur/NuméroDeVersion</em> @@ -129,17 +129,17 @@ Encore une fois, assurez vous de regarder au bon endroit selon le navigateur vis ### Moteur de rendu -Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre. +Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre. -Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu. +Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu. | Moteur | Doit contenir | Ne doit pas contenir | | ------- | --------------- | --------------------------------------------------------------------------------------------------------------- | -| Gecko | Gecko/xyz | | -| WebKit | AppleWebKit/xyz | Attention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs | -| Presto | Opera/xyz | **Note :** Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink") | +| Gecko | Gecko/xyz | | +| WebKit | AppleWebKit/xyz | Attention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs | +| Presto | Opera/xyz | **Note :** Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink") | | Trident | Trident/xyz | Internet Explorer place cette chaîne dans la partie _commentaire_ du User-Agent | -| Blink | Chrome/xyz | | +| Blink | Chrome/xyz | | ## Version du moteur de rendu @@ -158,7 +158,7 @@ La raison la plus courante de détecter le User-Agent et de déterminer sur quel - Ne partez jamais du principe qu'un navigateur ne fonctionne que sur un seul type d'appareil. En particulier, ne pas définir de paramètre par défaut selon le navigateur. - N'utilisez jamais la chaîne dédiée au système d'exploitation pour déterminer si le navigateur est sur un mobile, une tablette ou un ordinateur. Le même système d'exploitation peut fonctionner sur plusieurs types d'appareil (par exemple, Android fonctionne aussi bien sur des tablettes que sur des téléphones). -Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile : +Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile : <table> <caption> diff --git a/files/fr/web/http/caching/index.md b/files/fr/web/http/caching/index.md index 358b471864..2c0657fd30 100644 --- a/files/fr/web/http/caching/index.md +++ b/files/fr/web/http/caching/index.md @@ -14,28 +14,28 @@ Les performances des sites et applications web peuvent être significativement a ## Différents types de caches -La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps. +La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps. -Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un _cache partagé_ est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un _cache privé_ est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web. +Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un _cache partagé_ est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un _cache privé_ est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.  ### Caches de navigateur privés -Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via [HTTP](/fr/docs/Web/HTTP "en/HTTP") par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache. +Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via [HTTP](/fr/docs/Web/HTTP "en/HTTP") par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache. ### Caches de proxy partagés Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence. -## Cibles des opérations de cache +## Cibles des opérations de cache -La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache : +La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache : - Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier. -- Redirection permanente : une réponse {{HTTPStatus(301)}} _(Moved Permanently)._ -- Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} _(Not Found)_. -- Résultat incomplet : une réponse {{HTTPStatus(206)}} _(Partial Content)_. +- Redirection permanente : une réponse {{HTTPStatus(301)}} _(Moved Permanently)._ +- Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} _(Not Found)_. +- Résultat incomplet : une réponse {{HTTPStatus(206)}} _(Partial Content)_. - Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache. Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} [ci-dessous](#Varying_responses). @@ -44,7 +44,7 @@ Une entrée de cache peut aussi consister en de multiples réponses stockées di ### L'en-tête Cache-control -Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies. +Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies. #### Pas du tout de cache mémoire @@ -70,13 +70,13 @@ La directive "public" indique que la réponse peut être mise en cache par n'imp La directive la plus importante ici est "max-age = \<secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle. Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande. Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive. Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple. -Pour plus de détails, voir aussi la section [Freshness](#Freshness) ci-dessous.. +Pour plus de détails, voir aussi la section [Freshness](#Freshness) ci-dessous.. Cache-Control: max-age=31536000 #### Validation -Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section [Validation](#Cache_validation) ci-dessous. +Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section [Validation](#Cache_validation) ci-dessous. Cache-Control: must-revalidate @@ -86,13 +86,13 @@ Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier ## Fraîcheur (Freshness) -Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("_cache eviction"_). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour. Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness); Aprés son expiration, elle est considérée périmée (_stale_). Les algoritmes d'éviction privilégient souvent les ressources fraîches. Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante. +Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("_cache eviction"_). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour. Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness); Aprés son expiration, elle est considérée périmée (_stale_). Les algoritmes d'éviction privilégient souvent les ressources fraîches. Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante. Ici un exemple de ce processus avec un cache de proxy partagé :  -Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "`Cache-control: max-age=N`" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas), on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce `Expires` existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête `Date` moins la valeur de l'en-tête `Last-modified` divisée par 10. +Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "`Cache-control: max-age=N`" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas), on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce `Expires` existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête `Date` moins la valeur de l'en-tête `Last-modified` divisée par 10. Le temps d'expiration s'organise comme ceci : @@ -102,43 +102,43 @@ Où `responseTime` est le moment auquel a été reçue la réponse selon le navi ### Ressources revues et corrigées -Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web. Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur. C'est possible avec des ressources mises à jour régulièrement ou très souvent mais ça devient problématique pour les ressources mises à jour très rarement. Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web : les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite. +Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web. Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur. C'est possible avec des ressources mises à jour régulièrement ou très souvent mais ça devient problématique pour les ressources mises à jour très rarement. Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web : les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite. -Les développeurs Web ont inventé une technique que Steve Sounders a appelée _revving_ ([source](https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/)). Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration très éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi. +Les développeurs Web ont inventé une technique que Steve Sounders a appelée _revving_ ([source](https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/)). Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration très éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi. Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est très important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.  -La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme 1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date. +La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme 1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date. ## Validation de cache -La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête "`Cache-control: must-revalidate`". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans `Advanced->Cache`. Il y a une option pour forcer la validation chaque fois qu'un document est chargé. +La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête "`Cache-control: must-revalidate`". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans `Advanced->Cache`. Il y a une option pour forcer la validation chaque fois qu'un document est chargé. Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort _(strong validator_) soit un faible (_weak validator_). ### ETags -L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "*opaque-to-the-user agent"* qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête `ETag` est une partie de la réponse pour une ressource, le client peut délivrer un {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache. +L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "*opaque-to-the-user agent"* qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête `ETag` est une partie de la réponse pour une ressource, le client peut délivrer un {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache. -L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête `Last-Modified` est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache. +L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête `Last-Modified` est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache. -Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal {{HTTPStatus(200)}} `OK`, ou bien retourner un statut {{HTTPStatus(304)}} `Not Modified` (avec un corps de réponse vide) pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache. +Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal {{HTTPStatus(200)}} `OK`, ou bien retourner un statut {{HTTPStatus(304)}} `Not Modified` (avec un corps de réponse vide) pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache. ## Varier les réponses -L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine. +L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine. -Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête `Vary` il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête `Vary` ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête. +Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête `Vary` il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête `Vary` ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.  -Cela peut être très utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête `Vary: User-Agent`, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" ([Cloaking](https://en.wikipedia.org/wiki/Cloaking)) n'est à craindre. +Cela peut être très utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête `Vary: User-Agent`, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" ([Cloaking](https://en.wikipedia.org/wiki/Cloaking)) n'est à craindre. Vary: User-Agent -Parce que la valeur d'en-tête {{HTTPHeader("User-Agent")}} est différente ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa. +Parce que la valeur d'en-tête {{HTTPHeader("User-Agent")}} est différente ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa. ## Voir aussi diff --git a/files/fr/web/http/content_negotiation/index.md b/files/fr/web/http/content_negotiation/index.md index 6099ac2b69..bc19e98507 100644 --- a/files/fr/web/http/content_negotiation/index.md +++ b/files/fr/web/http/content_negotiation/index.md @@ -42,17 +42,17 @@ The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of [default values for common browsers](/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) is available. -### The `Accept-CH` header {{experimental_inline}} +### The `Accept-CH` header {{experimental_inline}} > **Note :** This is part of an **experimental** technology called _Client Hints_. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later. -The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are: +The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are: | Value | Meaning | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | +| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | | `DPR` | Indicates the client's device pixel ratio. | -| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. | +| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. | | `Width` | Indicates the resource width in physical pixels (in other words the intrinsic size of an image). | ### The `Accept-Charset` header @@ -63,7 +63,7 @@ With UTF-8 now being well-supported, being the preferred way of encoding charact ### The `Accept-CH-Lifetime` header -> **Note :** This is part of an **experimental** technology called *Client Hints* and is only available in Chrome 61 or later. +> **Note :** This is part of an **experimental** technology called *Client Hints* and is only available in Chrome 61 or later. The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the `Device-Memory` value of the `Accept-CH` header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional. @@ -100,7 +100,7 @@ The `Vary` header was added in the version 1.1 of HTTP and is necessary in order ## Agent-driven negotiation -Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern. +Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern. From the beginnings of HTTP, the protocol allowed another negotiation type: _agent-driven negotiation_ or _reactive negotiation_. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use. diff --git a/files/fr/web/http/cookies/index.md b/files/fr/web/http/cookies/index.md index 095e6b5332..8d8b817bfd 100644 --- a/files/fr/web/http/cookies/index.md +++ b/files/fr/web/http/cookies/index.md @@ -22,21 +22,21 @@ Les cookies sont utilisés pour 3 raisons principales : - Suivi - : Enregistrement et analyse du comportement utilisateur. -Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'[API Web storage](/fr/docs/Web/API/Web_Storage_API "DOM Storage") (`localStorage` et `sessionStorage`) et [IndexedDB](/fr/docs/Web/API/API_IndexedDB). +Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'[API Web storage](/fr/docs/Web/API/Web_Storage_API "DOM Storage") (`localStorage` et `sessionStorage`) et [IndexedDB](/fr/docs/Web/API/API_IndexedDB). > **Note :** Pour voir les cookies stockés (et d'autres stockages que le navigateur peut conserver), vous ouvrez l'[Inspecteur de stockage](/fr/docs/Outils/Inspecteur_de_stockage) des Outils Développeur et sélectionnez Cookies dans l'onglet stockage (pour Firefox). ## Création de cookies -Après avoir reçu une requête HTTP, un serveur peut renvoyer sa réponse avec une ou des entête(s) {{HTTPHeader("Set-Cookie")}}. Le cookie ou les cookies ainsi définis sont habituellement stockés par le navigateur, puis renvoyés lors des prochaines requêtes au même serveur, dans une entête HTTP {{HTTPHeader("Cookie")}}. Une date d'expiration ou une durée peut être spécifiée par cookie, après quoi le cookie ne sera plus envoyé. De plus, des restrictions à un domaine ou un chemin spécifiques peuvent être spécifiés, limitant quand le cookie est envoyé. +Après avoir reçu une requête HTTP, un serveur peut renvoyer sa réponse avec une ou des entête(s) {{HTTPHeader("Set-Cookie")}}. Le cookie ou les cookies ainsi définis sont habituellement stockés par le navigateur, puis renvoyés lors des prochaines requêtes au même serveur, dans une entête HTTP {{HTTPHeader("Cookie")}}. Une date d'expiration ou une durée peut être spécifiée par cookie, après quoi le cookie ne sera plus envoyé. De plus, des restrictions à un domaine ou un chemin spécifiques peuvent être spécifiés, limitant quand le cookie est envoyé. -### Les entêtes `Set-Cookie` et `Cookie` +### Les entêtes `Set-Cookie` et `Cookie` -L'entête de réponse HTTP {{HTTPHeader("Set-Cookie")}} envoie un cookie depuis le serveur vers le navigateur. Un cookie simple est défini comme ceci: +L'entête de réponse HTTP {{HTTPHeader("Set-Cookie")}} envoie un cookie depuis le serveur vers le navigateur. Un cookie simple est défini comme ceci: Set-Cookie: <nom-du-cookie>=<valeur-du-cookie> -> **Note :** Voici comment utiliser l'en-tête `Set-Cookie` dans divers langages de programmation côté serveur : +> **Note :** Voici comment utiliser l'en-tête `Set-Cookie` dans divers langages de programmation côté serveur : > > - [PHP](https://secure.php.net/manual/en/function.setcookie.php) > - [Node.JS](https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value) @@ -60,11 +60,11 @@ Maintenant, à chaque requête vers le serveur, le navigateur va renvoyer au ser ### Cookies de session -Le cookie créé ci-dessus est un *cookie de session* : il est effacé quand le navigateur est fermé, puisqu'on n'a pas spécifié de directive `Expires` ou `Max-Age`. Notons cependant que les navigateurs web peuvent utiliser la **restauration de session**, ce qui fait de la plupart des cookies des cookies permanents, comme si le navigateur n'avait jamais été fermé. +Le cookie créé ci-dessus est un *cookie de session* : il est effacé quand le navigateur est fermé, puisqu'on n'a pas spécifié de directive `Expires` ou `Max-Age`. Notons cependant que les navigateurs web peuvent utiliser la **restauration de session**, ce qui fait de la plupart des cookies des cookies permanents, comme si le navigateur n'avait jamais été fermé. ### Cookies permanents -Plutôt que d'expirer quand le client ferme, _les cookies permanents_ expirent à une date spécifique (`Expires`) ou après un certain temps (`Max-Age`). +Plutôt que d'expirer quand le client ferme, _les cookies permanents_ expirent à une date spécifique (`Expires`) ou après un certain temps (`Max-Age`). Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; @@ -96,7 +96,7 @@ Les cookies `SameSite` laissent les serveurs exiger qu'un cookie ne soit pas env ### Accès JavaScript en utilisant `Document.cookie` -De nouveaux cookies peuvent également être créés via JavaScript en utilisant la propriété {{domxref("Document.cookie")}}, et si l'option `HttpOnly` n'est pas définie, les cookies existants peuvent être également accédés via JavaScript. +De nouveaux cookies peuvent également être créés via JavaScript en utilisant la propriété {{domxref("Document.cookie")}}, et si l'option `HttpOnly` n'est pas définie, les cookies existants peuvent être également accédés via JavaScript. ```js document.cookie = "yummy_cookie=choco"; @@ -158,7 +158,7 @@ Pour faire court, la directive de l'UE stipule qu'avant de pouvoir stocker ou r Pour en savoir plus, voir [cette section Wikipedia](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive) et consultez les lois de l'état pour avoir des informations plus récentes et plus précises. -### Cookies Zombie et Evercookies +### Cookies Zombie et Evercookies Une approche plus radicale des cookies sont les Cookies Zombies ou "Evercookies", qui sont des cookies recrées après leur suppression et intentionnellement difficiles à supprimer définitivement. Ils utilisent l'[API Web storage](/en-US/docs/Web/API/Web_Storage_API "DOM Storage"), les Flash Local Shared Objects et d'autres techniques pour se recréer d'eux mêmes dès que l'absence du cookie est détéctée. diff --git a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index 37bf96589a..8ddeb19c1d 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -16,7 +16,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas ## Symptomes - Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz » + Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz » ## Quel est le problème ? diff --git a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md index 2e32ab6224..995063774e 100644 --- a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md @@ -24,10 +24,10 @@ original_slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi ## Qu'est ce qui ne s'est pas bien passé ? -La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base. +La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base. ## Voir aussi -- [Erreurs CORS](/en-US/docs/Web/HTTP/CORS/Errors) +- [Erreurs CORS](/en-US/docs/Web/HTTP/CORS/Errors) - Grammaire: {{Glossary("CORS")}} - [Introduction CORS](/en-US/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md index 6896531f36..22f2269059 100644 --- a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md @@ -8,7 +8,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant ## Symptomes - Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. + Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. ## Quel est le problème ? diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md index 7ad0885f78..995cfb22a4 100644 --- a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md +++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md @@ -19,7 +19,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp ## Raison - Raison : la requête CORS n’utilise pas http. + Raison : la requête CORS n’utilise pas http. ## Qu'est ce qui n'a pas fonctionné ? diff --git a/files/fr/web/http/cors/index.md b/files/fr/web/http/cors/index.md index b9ed23bccb..659bf64956 100644 --- a/files/fr/web/http/cors/index.md +++ b/files/fr/web/http/cors/index.md @@ -12,7 +12,7 @@ translation_of: Web/HTTP/CORS --- {{HTTPSidebar}} -Le « _Cross-origin resource sharing_ » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP **multi-origine (_cross-origin_)** lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante. +Le « _Cross-origin resource sharing_ » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP **multi-origine (_cross-origin_)** lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante. Prenons un exemple de requête multi-origine : une page HTML est servie depuis `http://domaine-a.com` contient un élément [`<img> src`](/fr/docs/Web/HTML/Element/Img#attr-src) ciblant `http://domaine-b.com/image.jpg`. Aujourd'hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (par exemple des CDN (_Content Delivery Network_ en anglais ou « Réseau de diffusion de contenu »). @@ -135,7 +135,7 @@ Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domai `Access-Control-Allow-Origin: http://toto.example` -On notera que, dans ce cas, aucun autre domaine que `http://toto.example` (tel qu'identifié par l'en-tête `Origin`) ne pourra accéder à la ressource. L'en-tête `Access-Control-Allow-Origin` devrait contenir la valeur qui a été envoyée dans l'en-tête `Origin` de la requête. +On notera que, dans ce cas, aucun autre domaine que `http://toto.example` (tel qu'identifié par l'en-tête `Origin`) ne pourra accéder à la ressource. L'en-tête `Access-Control-Allow-Origin` devrait contenir la valeur qui a été envoyée dans l'en-tête `Origin` de la requête. ### Requêtes nécessitant une requête préliminaire @@ -302,7 +302,7 @@ En attendant que les navigateurs comblent ce manque, il est possible de contourn S'il n'est pas possible d'appliquer ces changements, on peut également : -1. Effectuer [une requête simple](#simples) (avec [`Response.url`](/fr/docs/Web/API/Response/url) si on utilise l'API Fetch ou [`XHR.responseURL`](/fr/docs/Web/API/XMLHttpRequest/responseURL) si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire. +1. Effectuer [une requête simple](#simples) (avec [`Response.url`](/fr/docs/Web/API/Response/url) si on utilise l'API Fetch ou [`XHR.responseURL`](/fr/docs/Web/API/XMLHttpRequest/responseURL) si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire. 2. Effectuer la requête initialement souhaitée avec l'URL _réelle_ obtenue à la première étape. Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème. diff --git a/files/fr/web/http/csp/index.md b/files/fr/web/http/csp/index.md index 69065b9743..c0a250e72f 100644 --- a/files/fr/web/http/csp/index.md +++ b/files/fr/web/http/csp/index.md @@ -22,7 +22,7 @@ Une autre possibilité consiste à utiliser l'élément HTML {{HTMLElement("meta ### Réduction des attaques _cross site scripting_ (XSS) -L'un des objectifs de CSP est la réduction et le rapport d'attaques XSS (injections de contenu). Les attaques XSS exploitent la confiance que les navigateurs ont dans le contenu reçu des serveurs. Des scripts malveillants peuvent être exécutés par le navigateur d'une victime parce que le navigateur fait confiance au serveur qui lui envoie des données même quand le contenu ne vient pas de là où il semble venir. +L'un des objectifs de CSP est la réduction et le rapport d'attaques XSS (injections de contenu). Les attaques XSS exploitent la confiance que les navigateurs ont dans le contenu reçu des serveurs. Des scripts malveillants peuvent être exécutés par le navigateur d'une victime parce que le navigateur fait confiance au serveur qui lui envoie des données même quand le contenu ne vient pas de là où il semble venir. CSP permet aux administrateurs système de réduire ou éliminer les moyens de réaliser des attaques XSS en permettant de spécifier les domaines autorisés à fournir des scripts pour la page visitée. Un navigateur compatible avec CSP n'exécute que les scripts provenant d'une origine autorisée par les règles CSP reçues et ignore ceux qui ne sont pas autorisés. On peut ainsi bloquer les domaines non autorisés, les scripts _inline_ (inclus dans une page HTML) ou associés à des événements via les attributs HTML dédiés. @@ -50,7 +50,7 @@ Une règle est définie par une série de directives qui décrivent chacune le c ## Exemples pour les cas courants -Cette section propose des règles CSP pour les scenarios les plus classiques. +Cette section propose des règles CSP pour les scenarios les plus classiques. ### Exemple 1 diff --git a/files/fr/web/http/headers/accept-charset/index.md b/files/fr/web/http/headers/accept-charset/index.md index 7f542ec055..06751baf66 100644 --- a/files/fr/web/http/headers/accept-charset/index.md +++ b/files/fr/web/http/headers/accept-charset/index.md @@ -38,7 +38,7 @@ Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut th - `*` - : Tout jeu de caractères non mentionné ailleurs dans l'en-tête; '\*' utilisé comme un joker. - `;q=` (q-factor weighting) - - : Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée _weight_. + - : Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée _weight_. ## Examples @@ -62,4 +62,4 @@ Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut th - HTTP [content negotiation](/en-US/docs/Web/HTTP/Content_negotiation) - Header avec le résultat de la négociation de contenu : {{HTTPHeader("Content-Type")}} -- Autres Header similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}} +- Autres Header similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}} diff --git a/files/fr/web/http/headers/accept-language/index.md b/files/fr/web/http/headers/accept-language/index.md index fc23cb2c34..a9fbb018e9 100644 --- a/files/fr/web/http/headers/accept-language/index.md +++ b/files/fr/web/http/headers/accept-language/index.md @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Headers/Accept-Language --- {{HTTPSidebar}} -L'en-tête **`Accept-Language`** de la requête HTTP indique quelles sont les langues que le client est capable de comprendre, et quelle variante locale est préférée. En utilisant la [négociation de contenu](/fr-FR/docs/Web/HTTP/Content_negotiation), le serveur choisit alors l'une des propositions, l'utilise et informe le client de son choix par l'entête de réponse {{HTTPHeader("Content-Language")}}. Les navigateurs définissent les valeurs adéquates pour cet entête en fonction de la langue de leur interface utilisateur, et même si un utilisateur peut la changer, cela se produit rarement (et cela est vu d'un mauvais œil, dans la mesure où cela permet l'identification par empreinte numérique). +L'en-tête **`Accept-Language`** de la requête HTTP indique quelles sont les langues que le client est capable de comprendre, et quelle variante locale est préférée. En utilisant la [négociation de contenu](/fr-FR/docs/Web/HTTP/Content_negotiation), le serveur choisit alors l'une des propositions, l'utilise et informe le client de son choix par l'entête de réponse {{HTTPHeader("Content-Language")}}. Les navigateurs définissent les valeurs adéquates pour cet entête en fonction de la langue de leur interface utilisateur, et même si un utilisateur peut la changer, cela se produit rarement (et cela est vu d'un mauvais œil, dans la mesure où cela permet l'identification par empreinte numérique). -Cet en-tête est une indication destinée à être utilisée lorsque le serveur n'a aucun moyen de déterminer la langue d'une autre manière, comme une URL spécifique, qui est contrôlée par une décision explicite de l'utilisateur. Il est recommandé que le serveur ne passe jamais outre une décision explicite. Le contenu d'`Accept-Language` est souvent hors du contrôle de l'utilisateur (comme lors d'un voyage et de l'utilisation d'un cybercafé à l'étranger) ; l'utilisateur peut également vouloir visiter une page dans une langue que celle des paramètres régionaux de son interface utilisateur. +Cet en-tête est une indication destinée à être utilisée lorsque le serveur n'a aucun moyen de déterminer la langue d'une autre manière, comme une URL spécifique, qui est contrôlée par une décision explicite de l'utilisateur. Il est recommandé que le serveur ne passe jamais outre une décision explicite. Le contenu d'`Accept-Language` est souvent hors du contrôle de l'utilisateur (comme lors d'un voyage et de l'utilisation d'un cybercafé à l'étranger) ; l'utilisateur peut également vouloir visiter une page dans une langue que celle des paramètres régionaux de son interface utilisateur. -Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (Not Acceptable). Mais, pour une meilleure expérience utilisateur, cela est rarement fait et la façon de faire la plus courante est d'ignorer l'en-tête `Accept-Language` dans ce cas. +Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (Not Acceptable). Mais, pour une meilleure expérience utilisateur, cela est rarement fait et la façon de faire la plus courante est d'ignorer l'en-tête `Accept-Language` dans ce cas. <table class="properties"> <tbody> @@ -50,11 +50,11 @@ Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriqueme - `<langue>` - : Une langue exprimée sous la forme de 2 ou 3 caractères. - `<locale>` - - : Une balise de langue complète. En plus de la langue elle-même, elle peut contenir des informations additionnelles après un`'-'`. L'information supplémentaire la plus courante est la variante de pays (telle que`'en-US'`) ou le type d'alphabet à utiliser (comme`'sr-Lat'`). D'autres variantes comme le type d'orthographe (`'de-DE-1996'`) ne sont pas habituellement utilisées dans le contexte de cet en-tête. + - : Une balise de langue complète. En plus de la langue elle-même, elle peut contenir des informations additionnelles après un`'-'`. L'information supplémentaire la plus courante est la variante de pays (telle que`'en-US'`) ou le type d'alphabet à utiliser (comme`'sr-Lat'`). D'autres variantes comme le type d'orthographe (`'de-DE-1996'`) ne sont pas habituellement utilisées dans le contexte de cet en-tête. - `*` - - : Toute langue ; `'*'` est utilisé comme un joker. + - : Toute langue ; `'*'` est utilisé comme un joker. - `;q=` (pondération q-factor) - - : Une quantité numérique donnant un ordre de préférence et qui utilise une [valeur de qualité](/en-US/docs/Glossary/Quality_values) relative, appelée _poids_. + - : Une quantité numérique donnant un ordre de préférence et qui utilise une [valeur de qualité](/en-US/docs/Glossary/Quality_values) relative, appelée _poids_. ## Exemples diff --git a/files/fr/web/http/headers/accept/index.md b/files/fr/web/http/headers/accept/index.md index 62b38864b0..aa2a915ed9 100644 --- a/files/fr/web/http/headers/accept/index.md +++ b/files/fr/web/http/headers/accept/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Accept --- {{HTTPSidebar}} -Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -([content negotiation](/en-US/docs/Web/HTTP/Content_negotiation)), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même. +Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -([content negotiation](/en-US/docs/Web/HTTP/Content_negotiation)), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même. <table class="properties"> <tbody> @@ -43,11 +43,11 @@ Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les ty ## Directives - `<MIME_type>/<MIME_subtype>` - - : Un type MIME unique et déterminé [MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types), comme par exemple `text/html`. + - : Un type MIME unique et déterminé [MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types), comme par exemple `text/html`. - `<MIME_type>/*` - - : un type MIME type ne comprenant pas de sous-type. `image/*` prendra en charge `image/png`, `image/svg`, `image/gif` et tous autres types d'image. + - : un type MIME type ne comprenant pas de sous-type. `image/*` prendra en charge `image/png`, `image/svg`, `image/gif` et tous autres types d'image. - `*/*` - - : Tout type MIME + - : Tout type MIME - `;q=` (facteur de pondération q) - : N'importe quelle valeur utilisée est placée selon un ordre de préférence exprimé par une valeur de qualité ([quality value](/en-US/docs/Glossary/Quality_values)) relative appelée le _poids_. diff --git a/files/fr/web/http/headers/access-control-allow-origin/index.md b/files/fr/web/http/headers/access-control-allow-origin/index.md index 1e4d094efd..6f51980d5e 100644 --- a/files/fr/web/http/headers/access-control-allow-origin/index.md +++ b/files/fr/web/http/headers/access-control-allow-origin/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin --- {{HTTPSidebar}} -L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si les ressources peuvent être partagées avec une [origine](/fr/docs/Glossaire/Origine) donnée. +L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si les ressources peuvent être partagées avec une [origine](/fr/docs/Glossaire/Origine) donnée. <table class="properties"> <tbody> @@ -31,7 +31,7 @@ L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si - \* - : Pour les demandes sans informations d’identification, le serveur peut spécifier « \* » comme un caractère générique, permettant ainsi à n’importe quelle origine d'accéder à la ressource. - \<origin> - - : Spécifie un URI qui peut accéder à la ressource. Il n'est possible de spécifier qu'une seule origine. + - : Spécifie un URI qui peut accéder à la ressource. Il n'est possible de spécifier qu'une seule origine. ## Exemples @@ -39,13 +39,13 @@ Pour permettre à n'importe quelle ressource d'accéder à vos ressources, vous Access-Control-Allow-Origin: * -Pour permettre `https://developer.mozilla.org` d'accéder à vos ressources, vous pouvez indiquer : +Pour permettre `https://developer.mozilla.org` d'accéder à vos ressources, vous pouvez indiquer : Access-Control-Allow-Origin: https://developer.mozilla.org ### CORS et le cache -Si le serveur spécifie un hôte d'origine plutôt que "\*", il doit également inclure "_Origin_" dans l'en-tête de réponse "_[Vary](/fr/docs/Web/HTTP/Headers/Vary)_" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête. +Si le serveur spécifie un hôte d'origine plutôt que "\*", il doit également inclure "_Origin_" dans l'en-tête de réponse "_[Vary](/fr/docs/Web/HTTP/Headers/Vary)_" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête. Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin diff --git a/files/fr/web/http/headers/access-control-request-headers/index.md b/files/fr/web/http/headers/access-control-request-headers/index.md index 0445c92aa6..52ede37abb 100644 --- a/files/fr/web/http/headers/access-control-request-headers/index.md +++ b/files/fr/web/http/headers/access-control-request-headers/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Access-Control-Request-Headers --- {{HTTPSidebar}} -L'entête **`Access-Control-Request-Headers`** est utilisé quand une requête de pré-vérification ({{glossary("preflight request")}}) et faite vers le serveur pour savoir les entêtes qui seront utilisés après la pré-vérification. +L'entête **`Access-Control-Request-Headers`** est utilisé quand une requête de pré-vérification ({{glossary("preflight request")}}) et faite vers le serveur pour savoir les entêtes qui seront utilisés après la pré-vérification. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/cache-control/index.md b/files/fr/web/http/headers/cache-control/index.md index 067322921a..1e128fd57a 100644 --- a/files/fr/web/http/headers/cache-control/index.md +++ b/files/fr/web/http/headers/cache-control/index.md @@ -66,7 +66,7 @@ Les règles standard `Cache-Control` suivantes peuvent être utilisées par un s Cache-Control: max-age=<seconds> Cache-Control: s-maxage=<seconds> -### Extensions de `Cache-Control` +### Extensions de `Cache-Control` Les directives Extension `Cache-Control` ne font pas partie du document sur les normes de base de la mise en cache HTTP. Vérifiez leur prise en charge dans la [table de compatibilité](#Browser_compatibility) ; les agents-utilisateurs qui ne les reconnaissent pas doivent les ignorer. diff --git a/files/fr/web/http/headers/content-disposition/index.md b/files/fr/web/http/headers/content-disposition/index.md index de52d9754e..8beb0cbe36 100644 --- a/files/fr/web/http/headers/content-disposition/index.md +++ b/files/fr/web/http/headers/content-disposition/index.md @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Headers/Content-Disposition --- {{HTTPSidebar}} -Dans une réponse HTTP régulière, l'en-tête de réponse `Content-Disposition` est un en-tête indiquant si le contenu devrait être affiché en ligne dans le navigateur, c'est-à-dire en tant que page Web, dans une page Web ou en pièce jointe qui sera téléchargé et enregistré localement. +Dans une réponse HTTP régulière, l'en-tête de réponse `Content-Disposition` est un en-tête indiquant si le contenu devrait être affiché en ligne dans le navigateur, c'est-à-dire en tant que page Web, dans une page Web ou en pièce jointe qui sera téléchargé et enregistré localement. -Dans un corps `multipart / form-data`, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite `boundary` définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, `Content-Disposition` n'a aucun effet. +Dans un corps `multipart / form-data`, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite `boundary` définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, `Content-Disposition` n'a aucun effet. L'en-tête `Content-Disposition` est défini dans le contexte plus large des messages MIME pour le courrier électronique, mais seul un sous-ensemble des paramètres possibles s'applique aux formulaires HTTP et {{HTTPMethod ("POST")}}. Seules les données de forme de valeur, ainsi que le nom de la directive optionnelle et le nom de fichier, peuvent être utilisés dans le contexte HTTP. @@ -44,7 +44,7 @@ L'en-tête `Content-Disposition` est défini dans le contexte plus large des mes ## Syntaxe -### En tant qu'entête de réponse pour le corps principal +### En tant qu'entête de réponse pour le corps principal Le premier paramètre dans le contexte HTTP est en ligne (valeur par défaut, indiquant qu'il peut être affiché à l'intérieur de la page Web ou en tant que page Web) ou pièce jointe (en indiquant qu'il devrait être téléchargé), la plupart des navigateurs présentant une boîte de dialogue "Enregistrer sous" Avec la valeur des paramètres du nom de fichier si présent. @@ -53,9 +53,9 @@ fichier si présent. Content-Disposition: attachment Content-Disposition: attachment; filename="filename.jpg" -### En tant qu'en-tête pour un corps à plusieurs parties +### En tant qu'en-tête pour un corps à plusieurs parties -Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont +Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont séparés par un point-virgule (';'). Content-Disposition: form-data Content-Disposition: form-data; @@ -70,14 +70,14 @@ Est suivie d'une chaîne contenant le nom du champ HTML dans la forme dont le co Un `name` avec une valeur de `'_charset_'` indique que la partie n'est pas un champ HTML, mais le jeu de caractères par défaut à utiliser pour les pièces sans informations de charset explicites. `<filename>` -Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec `Content-Disposition: attachement`, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur. +Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec `Content-Disposition: attachement`, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur. `<filename*>` -Les paramètres `filename` et `filename*` diffèrent uniquement en ce que `filename*` utilise l'encodage défini dans la RFC 5987. Lorsque `filename` et `filename*` sont présents dans une seule valeur de champ d'en-tête, `filename*` est préféré à `filename` lorsque les deux sont présents et compris. +Les paramètres `filename` et `filename*` diffèrent uniquement en ce que `filename*` utilise l'encodage défini dans la RFC 5987. Lorsque `filename` et `filename*` sont présents dans une seule valeur de champ d'en-tête, `filename*` est préféré à `filename` lorsque les deux sont présents et compris. ## Exemples -Une réponse déclanchant le dialogue "Enregistrer sous": +Une réponse déclanchant le dialogue "Enregistrer sous": ```html 200 OK @@ -120,7 +120,7 @@ Un exemple de formulaire HTML, publié à l'aide du format `multipart / form-dat ## Notes de compatibilité -- Firefox 5 gère l'en-tête de réponse HTTP `Content-Disposition` plus efficacement si les deux paramètres du nom de fichier et du nom de fichier sont fournis. Il examine tous les noms fournis, en utilisant le paramètre \* du nom de fichier, s'il est disponible, même si un paramètre de nom de fichier est inclus en premier. Auparavant, le premier paramètre correspondant serait utilisé, empêchant ainsi un nom plus approprié d'être utilisé. Voir {{bug (588781)}}. +- Firefox 5 gère l'en-tête de réponse HTTP `Content-Disposition` plus efficacement si les deux paramètres du nom de fichier et du nom de fichier sont fournis. Il examine tous les noms fournis, en utilisant le paramètre \* du nom de fichier, s'il est disponible, même si un paramètre de nom de fichier est inclus en premier. Auparavant, le premier paramètre correspondant serait utilisé, empêchant ainsi un nom plus approprié d'être utilisé. Voir {{bug (588781)}}. ## Voir également diff --git a/files/fr/web/http/headers/content-encoding/index.md b/files/fr/web/http/headers/content-encoding/index.md index e40e23a9c4..e3a45dc30d 100644 --- a/files/fr/web/http/headers/content-encoding/index.md +++ b/files/fr/web/http/headers/content-encoding/index.md @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Headers/Content-Encoding --- {{HTTPSidebar}} -L'en-tête **`Content-Encoding`** indique la compression utilisée sur le média contenu dans le corps de la requête. Il permet au client de savoir comment décoder le contenu afin d'obtenir le type de média référencé par l'entête `Content-Type`. +L'en-tête **`Content-Encoding`** indique la compression utilisée sur le média contenu dans le corps de la requête. Il permet au client de savoir comment décoder le contenu afin d'obtenir le type de média référencé par l'entête `Content-Type`. -Il est recommandé de compresser les données autant que possible et donc d'utiliser cet en-tête. Toutefois, certains types de fichiers, comme les images jpeg, sont déjà compressés. Parfois, l'utilisation d'une compression supplémentaire ne réduit pas la taille de la chage utile et peut même la rendre plus longue. +Il est recommandé de compresser les données autant que possible et donc d'utiliser cet en-tête. Toutefois, certains types de fichiers, comme les images jpeg, sont déjà compressés. Parfois, l'utilisation d'une compression supplémentaire ne réduit pas la taille de la chage utile et peut même la rendre plus longue. <table class="properties"> <tbody> @@ -45,15 +45,15 @@ Il est recommandé de compresser les données autant que possible et donc d'util ## Directives - `gzip` - - : Un format utilisant le [codage Lempel-Ziv](http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77) (LZ77), avec un CRC de 32 bits. Il s'agit du format original pour le programme UNIX _gzip_. La norme HTTP/1.1 recommande également que les serveurs prenant en charge cet encodage reconnaissent `x-gzip` comme alias, à des fins de compatibilité. + - : Un format utilisant le [codage Lempel-Ziv](http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77) (LZ77), avec un CRC de 32 bits. Il s'agit du format original pour le programme UNIX _gzip_. La norme HTTP/1.1 recommande également que les serveurs prenant en charge cet encodage reconnaissent `x-gzip` comme alias, à des fins de compatibilité. - `compress` - - : Un format utilisant l'algorithme [Lempel-Ziv-Welch](http://en.wikipedia.org/wiki/LZW) (LZW). Le nom de la valeur a été tiré du programme de compression UNIX, qui a mis en œuvre cet algorithme. Comme le programme de compression, qui a disparu de la plupart des distributions UNIX, ce codage de contenu n'est pas utilisé par de nombreux navigateurs aujourd'hui, en partie à cause d'un problème de brevet (il a expiré en 2003). + - : Un format utilisant l'algorithme [Lempel-Ziv-Welch](http://en.wikipedia.org/wiki/LZW) (LZW). Le nom de la valeur a été tiré du programme de compression UNIX, qui a mis en œuvre cet algorithme. Comme le programme de compression, qui a disparu de la plupart des distributions UNIX, ce codage de contenu n'est pas utilisé par de nombreux navigateurs aujourd'hui, en partie à cause d'un problème de brevet (il a expiré en 2003). - `deflate` - : Utilisant la structure [zlib](http://en.wikipedia.org/wiki/Zlib) (définie dans la [RFC 1950](http://tools.ietf.org/html/rfc1950)) avec l'algorithme de compression _[deflate](http://en.wikipedia.org/wiki/DEFLATE)_ (défini dans la [RFC 1951](http://tools.ietf.org/html/rfc1951)). - `identity` - : Indicates the identity function (c'est-à-dire qu'il n'y a eu aucune compression ou modification). Sauf mention contraire, cette valeur est toujours considérée comme acceptable. - `br` - - : Un format utilisant l'algorithme de [Brotli](https://en.wikipedia.org/wiki/Brotli). + - : Un format utilisant l'algorithme de [Brotli](https://en.wikipedia.org/wiki/Brotli). ## Exemples diff --git a/files/fr/web/http/headers/content-language/index.md b/files/fr/web/http/headers/content-language/index.md index 3430f8620e..6ce7a14bd5 100644 --- a/files/fr/web/http/headers/content-language/index.md +++ b/files/fr/web/http/headers/content-language/index.md @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Headers/Content-Language --- {{HTTPSidebar}} -L'en-tête **`Content-Language`** est utilisé pour décrire quels langages sont destinés au public, de sorte que cela permette à l'utilisateur de se différencier en fonction de la langue préférée des utilisateurs. +L'en-tête **`Content-Language`** est utilisé pour décrire quels langages sont destinés au public, de sorte que cela permette à l'utilisateur de se différencier en fonction de la langue préférée des utilisateurs. -Par exemple, si "`Content-Language: de-DE`" est mis en place, cela signifie que la page est destinée à un public parlant l'allemand (par contre, cela n'indique pas que la page est écrite en allemand. Par exemple, elle pourrait être écrite en anglais dans le cadre d'un cours de langue destiné aux allemands). +Par exemple, si "`Content-Language: de-DE`" est mis en place, cela signifie que la page est destinée à un public parlant l'allemand (par contre, cela n'indique pas que la page est écrite en allemand. Par exemple, elle pourrait être écrite en anglais dans le cadre d'un cours de langue destiné aux allemands). -Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signifie que la page est destinée à tout public de langue. Plusieurs tags de langue sont également possibles, ainsi que la mise en place de l'en-tête `Content-Language` pour dfférents types de médias, et pas seulement pour les documents texte. +Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signifie que la page est destinée à tout public de langue. Plusieurs tags de langue sont également possibles, ainsi que la mise en place de l'en-tête `Content-Language` pour dfférents types de médias, et pas seulement pour les documents texte. <table class="properties"> <tbody> @@ -40,8 +40,8 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif <td> Oui, avec comme restriction supplémentaire que les valeurs ne peuvent contenir que les - caractères <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, - l'espace ou <code>*,-.;=</code>. + caractères <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, + l'espace ou <code>*,-.;=</code>. </td> </tr> </tbody> @@ -56,7 +56,7 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif ## Directives - `language-tag` - - : Plusieurs tags de langue sont séparés par paragraphe. Chaque tag de langue est une séquence d'un ou plusieurs sous-tags insensibles à la casse, chacun séparé par un tiret ("`-`", `%x2D`). Dans la plupart des cas, un tag de langue se compose d'un sous-tag de langue principal qui identifie une large famille de langues connexes (par exemple, «en» = anglais), suivi éventuellement d'une série de sous-tags qui affinent ou réduisent la variété de langue. (par exemple, "en-CA" = la variété d'anglais telle que communiquée au Canada). + - : Plusieurs tags de langue sont séparés par paragraphe. Chaque tag de langue est une séquence d'un ou plusieurs sous-tags insensibles à la casse, chacun séparé par un tiret ("`-`", `%x2D`). Dans la plupart des cas, un tag de langue se compose d'un sous-tag de langue principal qui identifie une large famille de langues connexes (par exemple, «en» = anglais), suivi éventuellement d'une série de sous-tags qui affinent ou réduisent la variété de langue. (par exemple, "en-CA" = la variété d'anglais telle que communiquée au Canada). > **Note :** Les tags de langues sont formellement définis dans la RFC 5646, qui repose sur la norme ISO 639 (très souvent la liste de codes ISO 639-1) pour les codes de langue à utiliser. @@ -64,7 +64,7 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif ### Indiquer la langue dans laquelle un document est écrit -L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci. +L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci. ```html <html lang="de"> @@ -79,7 +79,7 @@ L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utili ### Indiquer un public cible pour une ressource -L'en-tête `Content-Language` est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue. +L'en-tête `Content-Language` est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue. Content-Language: de, en @@ -97,4 +97,4 @@ L'en-tête `Content-Language` est utilisé pour spécifier le public destiné - {{HTTPHeader("Accept-Language")}} - [HTTP headers, meta elements and language information](https://www.w3.org/International/questions/qa-http-and-lang.en) -- [HTML `lang` attribute](/fr/docs/Web/HTML/Global_attributes/lang) +- [HTML `lang` attribute](/fr/docs/Web/HTML/Global_attributes/lang) diff --git a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md index 02b2d4f27a..e90933cf4e 100644 --- a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md +++ b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md @@ -19,7 +19,7 @@ La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`block-all-m Toutes les requêtes vers des [contenus mixtes](/fr/docs/Sécurité/MixedContent) sont alors bloquées, y compris les ressources actives et passives. Cela s'applique aussi aux documents {{HTMLElement("iframe")}}, assurant que la page est complètement protégée contre les contenus mixtes. -> **Note :** La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant `block-all-mixed-content`. Si elle est définie, alors `block-all-mixed-content` n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP. +> **Note :** La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant `block-all-mixed-content`. Si elle est définie, alors `block-all-mixed-content` n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP. ## Syntaxe diff --git a/files/fr/web/http/headers/content-security-policy/index.md b/files/fr/web/http/headers/content-security-policy/index.md index 52c2524f8a..27d6d09dd5 100644 --- a/files/fr/web/http/headers/content-security-policy/index.md +++ b/files/fr/web/http/headers/content-security-policy/index.md @@ -41,7 +41,7 @@ Les directives de récupération (ou _fetch directives_ en anglais) contrôlent - {{CSP("child-src")}} - : Définit les sources valides pour les [web workers](/fr/docs/Web/API/Web_Workers_API) et les éléments qui représentent des contextes de navigation imbriqués tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}. -> **Attention :** Plutôt que la directive **`child-src`**, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}. +> **Attention :** Plutôt que la directive **`child-src`**, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}. - {{CSP("connect-src")}} - : Restreint les URL qui peuvent être chargées via des scripts. @@ -97,7 +97,7 @@ Les directives de navigation permettent par exemple de paramétrer les emplaceme - {{CSP("form-action")}} - : Restreint les URL qui peuvent être utilisées comme cibles pour envoyer des formulaires depuis un contexte donné. - {{CSP("frame-ancestors")}} - - : Définit les parent valides qui peuvent intégrer une page grâce aux éléments {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}. + - : Définit les parent valides qui peuvent intégrer une page grâce aux éléments {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}. - {{CSP("navigate-to")}}{{experimental_inline}} - : Restreint les URL vers lesquelles on peut naviguer depuis un document, quel que soit le moyen de navigation (un lien, un formulaire, `window.location`, `window.open`, etc.) @@ -177,12 +177,12 @@ Pour plus d'exemples, consulter [les recommandations de Mozilla pour la sécurit | Spécification | État | Commentaires | | -------------------------------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{specName("CSP 3.0")}} | {{Spec2('CSP 3.0')}} | Ajout de `manifest-src`, `navigation-to`, `report-to`, `strict-dynamic`, `worker-src`. `frame-src` n'est plus déprécié. `report-uri` est déprécié au profit de `report-to`. | +| {{specName("CSP 3.0")}} | {{Spec2('CSP 3.0')}} | Ajout de `manifest-src`, `navigation-to`, `report-to`, `strict-dynamic`, `worker-src`. `frame-src` n'est plus déprécié. `report-uri` est déprécié au profit de `report-to`. | | {{specName("Mixed Content")}} | {{Spec2("Mixed Content")}} | Ajout de `block-all-mixed-content`. | | {{specName("Subresource Integrity")}} | {{Spec2("Subresource Integrity")}} | Ajout de `require-sri-for`. | | {{specName("Upgrade Insecure Requests")}} | {{Spec2("Upgrade Insecure Requests")}} | Ajout de `upgrade-insecure-requests`. | | {{specName("CSP 1.1")}} | {{Spec2("CSP 1.1")}} | Ajout de `base-uri`, `child-src`, `form-action`, `frame-ancestors`, `plugin-types`, `referrer`, `reflected-xss` et `report-uri`. Dépréciation de `frame-src`. | -| {{specName("CSP 1.0")}} | {{Spec2("CSP 1.0")}} | Définition de `connect-src`, `default-src`, `font-src`, `frame-src`, `img-src`, `media-src`, `object-src`, report-uri, `sandbox`, `script-src` et `style-src`. | +| {{specName("CSP 1.0")}} | {{Spec2("CSP 1.0")}} | Définition de `connect-src`, `default-src`, `font-src`, `frame-src`, `img-src`, `media-src`, `object-src`, report-uri, `sandbox`, `script-src` et `style-src`. | ## Compatibilité des navigateurs diff --git a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md index aa47591d59..33aedae242 100644 --- a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md +++ b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-f --- {{HTTPSidebar}} -La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`require-trusted-types-for`** {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur [Element.innerHTML](/en-US/docs/Web/API/Element/innerHTML). +La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`require-trusted-types-for`** {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur [Element.innerHTML](/en-US/docs/Web/API/Element/innerHTML). Lors de leur usage, ces fonctions n'acceptent que des valeurs typées et non falsifiables créées par des règles de Trusted Type et rejettent les chaines de caractère. Conjointement à la directive **[`trusted-types`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)**, qui empêche la création de règles de Trusted Type, cette directive permet aux auteurs de définir des règles empêchant d'écrire des données dans le DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture. @@ -35,14 +35,14 @@ const attackerInput = '<svg onload="alert(/cross-site-scripting/)" />'; const el = document.createElement('div'); if (typeof trustedTypes !== 'undefined') { - // Create a policy that can create TrustedHTML values + // Create a policy that can create TrustedHTML values // after sanitizing the input strings with DOMPurify library. - const sanitizer = trustedTypes.createPolicy('foo', { - createHTML: (input) => DOMPurify.sanitize(input) - }); + const sanitizer = trustedTypes.createPolicy('foo', { + createHTML: (input) => DOMPurify.sanitize(input) + }); - el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. - el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. + el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. + el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. } ``` diff --git a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md index e0d25ed7db..df4f947f1f 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md +++ b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md @@ -18,7 +18,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-attr --- {{HTTPSidebar}} -La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src-attr`** spécifie les sources valides pour du code JavaScript embarqué dans des éléments {{HTMLElement("script")}} ou dans des gestionnaires d'évènements par attribut comme `onclick`, mais non les URL chargées par des éléments {{HTMLElement("script")}}. +La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src-attr`** spécifie les sources valides pour du code JavaScript embarqué dans des éléments {{HTMLElement("script")}} ou dans des gestionnaires d'évènements par attribut comme `onclick`, mais non les URL chargées par des éléments {{HTMLElement("script")}}. <table class="properties"> <tbody> @@ -48,7 +48,7 @@ Une ou plusieurs sources peuvent être autorisées pour cette directive : Content-Security-Policy: script-src-attr <source>; Content-Security-Policy: script-src-attr <source> <source>; -`script-src-attr` peut être utilisée conjointement à {{CSP("script-src")}} : +`script-src-attr` peut être utilisée conjointement à {{CSP("script-src")}} : Content-Security-Policy: script-src <source>; Content-Security-Policy: script-src-attr <source>; diff --git a/files/fr/web/http/headers/content-security-policy/script-src/index.md b/files/fr/web/http/headers/content-security-policy/script-src/index.md index 03f6414e8c..beaac9c5cd 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src/index.md +++ b/files/fr/web/http/headers/content-security-policy/script-src/index.md @@ -96,13 +96,13 @@ Cette directive CSP autorisera tous les scripts {{HTMLElement("script")}} embarq </script> ``` -Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués : +Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués : ```bash Content-Security-Policy: script-src 'nonce-2726c7f26c' ``` -Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} : +Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} : ```html <script nonce="2726c7f26c"> diff --git a/files/fr/web/http/headers/content-security-policy/style-src/index.md b/files/fr/web/http/headers/content-security-policy/style-src/index.md index 60d4956741..858f84b371 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src/index.md +++ b/files/fr/web/http/headers/content-security-policy/style-src/index.md @@ -121,7 +121,7 @@ Cette directive CSP autorisera toutes les feuilles de styles embarquées telles <div style="display:none">Foo</div> ``` -Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} : +Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} : ```bash Content-Security-Policy: style-src 'nonce-2726c7f26c' diff --git a/files/fr/web/http/headers/content-security-policy/trusted-types/index.md b/files/fr/web/http/headers/content-security-policy/trusted-types/index.md index dd9d6cd0e5..4773ef4c8c 100644 --- a/files/fr/web/http/headers/content-security-policy/trusted-types/index.md +++ b/files/fr/web/http/headers/content-security-policy/trusted-types/index.md @@ -26,7 +26,7 @@ Conjointement à la directive [`require-trusted-types-for`](/en-US/docs/Web/HTTP Content-Security-Policy: trusted-types <policyName> <policyName> 'allow-duplicates'; - \<nomRègle> - - : Un nom de règle est composé de caractères alphanumériques ou d'un ou plusieurs "`-#=_/@.%`". Une astérisque (`*`) comme nom de règle informe l'agent utilisateur d'autoriser tout nom de règle unique (quoique la valeur `'allow-duplicates'` pourrait permettre d'être plus laxiste à l'avenir). + - : Un nom de règle est composé de caractères alphanumériques ou d'un ou plusieurs "`-#=_/@.%`". Une astérisque (`*`) comme nom de règle informe l'agent utilisateur d'autoriser tout nom de règle unique (quoique la valeur `'allow-duplicates'` pourrait permettre d'être plus laxiste à l'avenir). - `'none'` - : Interdit la création de toute règle de Trusted Type (identique au fait de ne renseigner aucun nom de règle). - `'allow-duplicates'` @@ -42,9 +42,9 @@ Ce code génèrera une erreur car une des règles créées a un nom non autoris ```js if (typeof trustedTypes !== 'undefined') { - const policyFoo = trustedTypes.createPolicy('foo', {}); - const policyFoo2 = trustedTypes.createPolicy('foo', {}); - const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent. + const policyFoo = trustedTypes.createPolicy('foo', {}); + const policyFoo2 = trustedTypes.createPolicy('foo', {}); + const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent. } ``` diff --git a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md index 8fed1ecd6c..bdc6da5401 100644 --- a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md +++ b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md @@ -53,7 +53,7 @@ Ces URL seront récrites avant que la requête soit envoyée, signifiant qu'aucu <img src="https://not-example.com/image.png"> ``` -Les conversions navigationnelles vers des ressources externes amènent un risque significatif de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci : +Les conversions navigationnelles vers des ressources externes amènent un risque significatif de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci : ```html <a href="https://example.com/">Home</a> diff --git a/files/fr/web/http/headers/content-type/index.md b/files/fr/web/http/headers/content-type/index.md index 98180e8867..9d1e9fc63f 100644 --- a/files/fr/web/http/headers/content-type/index.md +++ b/files/fr/web/http/headers/content-type/index.md @@ -60,7 +60,7 @@ Dans une requête {{HTTPMethod("POST")}}, qui vient d'une soumission d'un formul </form> ``` -La requête ressemble à peu près à ceci (les en-têtes moins intéressants ont été ici volontairement omis) : +La requête ressemble à peu près à ceci (les en-têtes moins intéressants ont été ici volontairement omis) : POST /toto HTTP/1.1 Content-Length: 68137 diff --git a/files/fr/web/http/headers/expires/index.md b/files/fr/web/http/headers/expires/index.md index 4c8a3935f9..8fbb6f71cd 100644 --- a/files/fr/web/http/headers/expires/index.md +++ b/files/fr/web/http/headers/expires/index.md @@ -5,11 +5,11 @@ translation_of: Web/HTTP/Headers/Expires --- {{HTTPSidebar}} -Le header **`Expires`** contient la date/heure après laquelle la réponse est considérée comme dépréciée. +Le header **`Expires`** contient la date/heure après laquelle la réponse est considérée comme dépréciée. -Les dates invalides, telles que la valeur 0, représentent une date dans le passé et signifient que la ressource est expirée. +Les dates invalides, telles que la valeur 0, représentent une date dans le passé et signifient que la ressource est expirée. -Si un header {{HTTPHeader("Cache-Control")}} contient une directive "max-age" ou "s-max-age" dans la réponse, le header `Expires` sera ignoré. +Si un header {{HTTPHeader("Cache-Control")}} contient une directive "max-age" ou "s-max-age" dans la réponse, le header `Expires` sera ignoré. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/feature-policy/index.md b/files/fr/web/http/headers/feature-policy/index.md index fd3b52178a..089612d0f2 100644 --- a/files/fr/web/http/headers/feature-policy/index.md +++ b/files/fr/web/http/headers/feature-policy/index.md @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Feature-Policy --- {{HTTPSidebar}} -L'en-tête HTTP **`Feature-Policy`** est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient. +L'en-tête HTTP **`Feature-Policy`** est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient. > **Note :** Cet en-tête est toujours au stade expérimental, et est sujet à être modifié à tout moment. Méfiez-vous en si vous souhaitez l'implanter sur vos sites. Il a maintenant été renommé `Permissions-Policy` dans la spécification, et cet article sera mis à jour pour refléter ce changement. diff --git a/files/fr/web/http/headers/if-none-match/index.md b/files/fr/web/http/headers/if-none-match/index.md index e7946d0c4d..1d8f6e0dda 100644 --- a/files/fr/web/http/headers/if-none-match/index.md +++ b/files/fr/web/http/headers/if-none-match/index.md @@ -9,18 +9,18 @@ tags: - Requêtes Conditionnelles translation_of: Web/HTTP/Headers/If-None-Match --- -L'en-tête de requête HTTP **`If-None-Match`** permet de conditionner la requête. Pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur renvoie la ressource demandée, avec un statut {{HTTPStatus("200")}}, seulement si elle n'a pas un {{HTTPHeader("ETag")}} correspondant à ceux fournis. Pour les autres méthodes, la requête ne sera traitée que si l'{{HTTPHeader("ETag")}} de l'éventuelle ressource existante ne correspond à aucune des valeurs listées. +L'en-tête de requête HTTP **`If-None-Match`** permet de conditionner la requête. Pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur renvoie la ressource demandée, avec un statut {{HTTPStatus("200")}}, seulement si elle n'a pas un {{HTTPHeader("ETag")}} correspondant à ceux fournis. Pour les autres méthodes, la requête ne sera traitée que si l'{{HTTPHeader("ETag")}} de l'éventuelle ressource existante ne correspond à aucune des valeurs listées. -Quand la condition échoue pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur doit retourner un code statut HTTP 304 (Not Modified). Pour les méthodes appliquant des changements côté serveur, le code statut 412 (Precondition Failed) est utilisé. Notez que le serveur générant une réponse 304 DOIT générer toutes les en-têtes qui auraient été envoyées avec une réponse 200 (OK) à la même requête : Cache-Control, Content-Location, Date, ETag, Expires, and Vary. +Quand la condition échoue pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur doit retourner un code statut HTTP 304 (Not Modified). Pour les méthodes appliquant des changements côté serveur, le code statut 412 (Precondition Failed) est utilisé. Notez que le serveur générant une réponse 304 DOIT générer toutes les en-têtes qui auraient été envoyées avec une réponse 200 (OK) à la même requête : Cache-Control, Content-Location, Date, ETag, Expires, and Vary. La comparaison avec l'{{HTTPHeader("ETag")}} stocké utilise l'_algorithme de comparaison faible_, c'est-à-dire que 2 fichiers sont considérés identiques pas seulement s'ils sont identiques octet à octet mais si leurs contenus sont équivalents. Par exemple, 2 pages dont seule la date de génération dans le pied de page diffère seraient considérées identiques. -Quand utilisé avec {{HTTPHeader("If-Modified-Since")}}, il a la priorité (si le serveur le supporte). +Quand utilisé avec {{HTTPHeader("If-Modified-Since")}}, il a la priorité (si le serveur le supporte). Il y a 2 cas d'utilisation communs: - Pour les méthodes {{HTTPMethod("GET")}} and {{HTTPMethod("HEAD")}}, pour mettre à jour une entité en cache qui a un {{HTTPHeader("ETag")}} associé. -- Pour les autres méthodes, et en particulier pour {{HTTPMethod("PUT")}}, `If-None-Match` avec pour valeur `*` peut être utilisé pour sauver un fichier dont on ne sait pas s'il existe, garantissant qu'un autre téléversement n'a pas été fait avant, perdant les données du précédent chargement ; ce problème est une variation du [problème de la mise à jour perdue](https://www.w3.org/1999/04/Editing/#3.1). +- Pour les autres méthodes, et en particulier pour {{HTTPMethod("PUT")}}, `If-None-Match` avec pour valeur `*` peut être utilisé pour sauver un fichier dont on ne sait pas s'il existe, garantissant qu'un autre téléversement n'a pas été fait avant, perdant les données du précédent chargement ; ce problème est une variation du [problème de la mise à jour perdue](https://www.w3.org/1999/04/Editing/#3.1). <table class="properties"> <tbody> @@ -44,9 +44,9 @@ Il y a 2 cas d'utilisation communs: ## Directives - \<etag_value> - - : Des tags d'entité représentant de façon unique les ressources demandées. Ce sont des chaînes de caractères ASCII entre guillemets doubles (comme `"675af34563dc-tr34"`) et peuvent être préfixés par `W/` pour indiquer que l'algorithme de comparaison faible doit être utilisé (inutile avec `If-None-Match` car il n'utilise que cet algorithme). + - : Des tags d'entité représentant de façon unique les ressources demandées. Ce sont des chaînes de caractères ASCII entre guillemets doubles (comme `"675af34563dc-tr34"`) et peuvent être préfixés par `W/` pour indiquer que l'algorithme de comparaison faible doit être utilisé (inutile avec `If-None-Match` car il n'utilise que cet algorithme). - `*` - - : L'astérisque est une valeur spéciale représentant toute ressource. Ils ne sont utilies que quand on téléverse une ressource, habituellement avec {{HTTPMethod("PUT")}}, pour vérifier si une autre ressource avec cette identité a déjà été téléversée avant. + - : L'astérisque est une valeur spéciale représentant toute ressource. Ils ne sont utilies que quand on téléverse une ressource, habituellement avec {{HTTPMethod("PUT")}}, pour vérifier si une autre ressource avec cette identité a déjà été téléversée avant. ## Exemples diff --git a/files/fr/web/http/headers/index.md b/files/fr/web/http/headers/index.md index 6fd48ff501..6bea2c6ae5 100644 --- a/files/fr/web/http/headers/index.md +++ b/files/fr/web/http/headers/index.md @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Headers Les en-têtes HTTP permettent au client et au serveur de transmettre des informations supplémentaires avec la requête ou la réponse. Un en-tête de requête est constitué de son nom (insensible à la casse) suivi d'un deux-points `:`, puis de sa valeur (sans saut de ligne). L'espace blanc avant la valeur est ignoré. -Des en-têtes propriétaires personnalisés peuvent être ajoutés en utilisant le préfixe `X-`, mais cette convention a été abandonnée en juin 2012, en raison des inconvénients qu'elle a présenté lorsque des champs non standard sont devenus standard dans [RFC 6648](https://tools.ietf.org/html/rfc6648); les autres en-têtes possibles sont listés dans une [liste IANA](https://www.iana.org/assignments/message-headers/message-headers.xhtml) et ont été définis dans la [RFC 4229](https://tools.ietf.org/html/rfc4229). IANA maintient également une [liste des propositions de nouveaux entêtes HTTP](https://www.iana.org/assignments/message-headers/message-headers.xhtml). +Des en-têtes propriétaires personnalisés peuvent être ajoutés en utilisant le préfixe `X-`, mais cette convention a été abandonnée en juin 2012, en raison des inconvénients qu'elle a présenté lorsque des champs non standard sont devenus standard dans [RFC 6648](https://tools.ietf.org/html/rfc6648); les autres en-têtes possibles sont listés dans une [liste IANA](https://www.iana.org/assignments/message-headers/message-headers.xhtml) et ont été définis dans la [RFC 4229](https://tools.ietf.org/html/rfc4229). IANA maintient également une [liste des propositions de nouveaux entêtes HTTP](https://www.iana.org/assignments/message-headers/message-headers.xhtml). Les en-têtes peuvent être groupés selon leur contexte : @@ -375,13 +375,13 @@ HTTP Public Key Pinning a été déprécié et supprimé au profit de Certificat - : contrôle le préchargement DNS, fonctionnalité par laquelle les navigateurs effectuent de manière proactive la résolution du nom de domaine sur les deux liens que l'utilisateur peut choisir de suivre ainsi que les URL des éléments référencés par le document, y compris les images, CSS, JavaScript, etc. - {{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}} - : ... -- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}} +- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}} - : ... - {{HTTPHeader("X-Requested-With")}} - : ... -- {{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}} +- {{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}} - : indique comment une page doit être indexée dans les résultats publics des moteurs de recherche ; cet en-tête est équivalent à `<meta name="robots" content="...">` -- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}} +- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}} - : Utilisé par Internet Explorer pour signaler quel mode de document utiliser. ## Contribuer diff --git a/files/fr/web/http/headers/last-modified/index.md b/files/fr/web/http/headers/last-modified/index.md index b0f4163570..9ccefde35a 100644 --- a/files/fr/web/http/headers/last-modified/index.md +++ b/files/fr/web/http/headers/last-modified/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Last-Modified --- {{HTTPSidebar}} -L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à laquelle le serveur d'origine pense que la ressource a été modifiée pour la dernière fois. Il est utilisé comme un validateur pour déterminer si une ressource reçue et une stockée sont les mêmes. Moins précis qu'un entête {{HTTPHeader("ETag")}}, c'est un mécanisme de rechange. Les requêtes conditionnelles contenant des entêtes {{HTTPHeader("If-Modified-Since")}} ou {{HTTPHeader("If-Unmodified-Since")}} font usage de ce champ. +L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à laquelle le serveur d'origine pense que la ressource a été modifiée pour la dernière fois. Il est utilisé comme un validateur pour déterminer si une ressource reçue et une stockée sont les mêmes. Moins précis qu'un entête {{HTTPHeader("ETag")}}, c'est un mécanisme de rechange. Les requêtes conditionnelles contenant des entêtes {{HTTPHeader("If-Modified-Since")}} ou {{HTTPHeader("If-Unmodified-Since")}} font usage de ce champ. <table class="properties"> <tbody> @@ -38,21 +38,21 @@ L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à l ## Directives - \<nom-jour> - - : Un nom parmi "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse). + - : Un nom parmi "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse). - \<jour> - - : Jour sur 2 chiffres, par ex. "04" ou "23". + - : Jour sur 2 chiffres, par ex. "04" ou "23". - \<mois> - - : Un mois parmi "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse). + - : Un mois parmi "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse). - \<année> - - : Millésime sur 4 chiffres, par ex. "1990" ou "2016". + - : Millésime sur 4 chiffres, par ex. "1990" ou "2016". - \<heure> - - : Heure sur 2 chiffres, par ex. "09" ou "23". + - : Heure sur 2 chiffres, par ex. "09" ou "23". - \<minute> - - : Minute sur 2 chiffres, par ex. "04" ou "59". + - : Minute sur 2 chiffres, par ex. "04" ou "59". - \<seconde> - - : Seconde sur 2 chiffres, par ex. "04" ou "59". + - : Seconde sur 2 chiffres, par ex. "04" ou "59". - `GMT` - - : Greenwich Mean Time. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale. + - : Greenwich Mean Time. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale. ## Exemples diff --git a/files/fr/web/http/headers/location/index.md b/files/fr/web/http/headers/location/index.md index 5dc0666208..f446bf6f7e 100644 --- a/files/fr/web/http/headers/location/index.md +++ b/files/fr/web/http/headers/location/index.md @@ -5,18 +5,18 @@ translation_of: Web/HTTP/Headers/Location --- {{HTTPSidebar}} -L'en-tête de réponse `Location` indique l'URL vers laquelle rediriger une page. Il a un sens seulement lorsqu'il est servi avec une réponse d'état `3xx` (redirection) ou `201` (créé). +L'en-tête de réponse `Location` indique l'URL vers laquelle rediriger une page. Il a un sens seulement lorsqu'il est servi avec une réponse d'état `3xx` (redirection) ou `201` (créé). -En cas de redirection, la méthode HTTP utilisée pour la nouvelle requête de récupération de la page pointée par `Location` dépend la méthode d'origine et du type de redirection : +En cas de redirection, la méthode HTTP utilisée pour la nouvelle requête de récupération de la page pointée par `Location` dépend la méthode d'origine et du type de redirection : -- Si les réponses {{HTTPStatus("303")}} (Voir Aussi) conduisent toujours à l'utilisation d'une méthode {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirection Temporaire) et {{HTTPStatus("308")}} (Redirection Permanente) ne modifient pas la méthode utilisée dans la demande d'origine; -- {{HTTPStatus("301")}} (Redirection permanente) et {{HTTPStatus("302")}} (Trouvé) ne change pas la méthode la plupart du temps, bien que les user-agents plus anciens puissent. +- Si les réponses {{HTTPStatus("303")}} (Voir Aussi) conduisent toujours à l'utilisation d'une méthode {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirection Temporaire) et {{HTTPStatus("308")}} (Redirection Permanente) ne modifient pas la méthode utilisée dans la demande d'origine; +- {{HTTPStatus("301")}} (Redirection permanente) et {{HTTPStatus("302")}} (Trouvé) ne change pas la méthode la plupart du temps, bien que les user-agents plus anciens puissent. Toutes les réponses avec l'un de ces codes d'état envoient un en-tête `Location`. En cas de création de ressource, il indique l'URL de la ressource nouvellement créée. -`Location` et {{HTTPHeader("Content-Location")}} sont différents : `Location` indique la cible d'une redirection (ou l'URL d'une ressource nouvellement créée), tandis que {{HTTPHeader("Content-Location")}} indique l'URL directe à utiliser pour accéder à la ressource lorsque la négociation de contenu a eu lieu, sans qu'il soit nécessaire de poursuivre la négociation de contenu. L'emplacement est un en-tête associé à la réponse, tandis que {{HTTPHeader("Content-Location")}} est associé à l'entité renvoyée. +`Location` et {{HTTPHeader("Content-Location")}} sont différents : `Location` indique la cible d'une redirection (ou l'URL d'une ressource nouvellement créée), tandis que {{HTTPHeader("Content-Location")}} indique l'URL directe à utiliser pour accéder à la ressource lorsque la négociation de contenu a eu lieu, sans qu'il soit nécessaire de poursuivre la négociation de contenu. L'emplacement est un en-tête associé à la réponse, tandis que {{HTTPHeader("Content-Location")}} est associé à l'entité renvoyée. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/origin/index.md b/files/fr/web/http/headers/origin/index.md index fecb90e2e2..379f350f65 100644 --- a/files/fr/web/http/headers/origin/index.md +++ b/files/fr/web/http/headers/origin/index.md @@ -27,7 +27,7 @@ L’en-tête de requête **`Origin`** indique la provenance de la requête. Il n Origin: "" Origin: <scheme> "://" <hostname> [ ":" <port> ] -`Origin` peut être une chaîne vide : c’est utile, par exemple, si la source est une `data` URL. +`Origin` peut être une chaîne vide : c’est utile, par exemple, si la source est une `data` URL. ## Directives diff --git a/files/fr/web/http/headers/referrer-policy/index.md b/files/fr/web/http/headers/referrer-policy/index.md index 3f58c26997..bbee0e2b13 100644 --- a/files/fr/web/http/headers/referrer-policy/index.md +++ b/files/fr/web/http/headers/referrer-policy/index.md @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Referrer-Policy --- {{HTTPSidebar}} -L'en-tête {{glossary("HTTP header")}} **`Referrer-Policy`** contrôle la quantité d'[informations sur le référent (referrer)](/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns) (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête. +L'en-tête {{glossary("HTTP header")}} **`Referrer-Policy`** contrôle la quantité d'[informations sur le référent (referrer)](/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns) (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête. <table class="properties"> <tbody> @@ -97,7 +97,7 @@ Autrement, une [relation de lien](/en-US/docs/Web/HTML/Link_types) définie à ` CSS peut demander des ressources référencées dans des feuilles de styles. Ces ressources suivent une règle de référent aussi : -- Les feuilles de styles CSS externes utilisant la règle par défaut (`no-referrer-when-downgrade`), moins qu'elle soit remplacée un l'en-tête HTTP `Referrer-Policy` dans la réponse de la feuille de styles CSS. +- Les feuilles de styles CSS externes utilisant la règle par défaut (`no-referrer-when-downgrade`), moins qu'elle soit remplacée un l'en-tête HTTP `Referrer-Policy` dans la réponse de la feuille de styles CSS. - Pour les éléments {{HTMLElement("style")}} ou [attributs `style`](/en-US/docs/Web/API/HTMLElement/style), la règle de référent du propriétaire du document est utilisée. ## Exemples diff --git a/files/fr/web/http/headers/set-cookie/samesite/index.md b/files/fr/web/http/headers/set-cookie/samesite/index.md index bc08705b7c..df33d041c2 100644 --- a/files/fr/web/http/headers/set-cookie/samesite/index.md +++ b/files/fr/web/http/headers/set-cookie/samesite/index.md @@ -68,7 +68,7 @@ Cette alerte apparait car la stratégie de `SameSite` pour le cookie n'a pas ét Set-Cookie: flavor=choco ``` -Même si vous pouvez compter sur la valeur par défaut `SameSite=Lax` des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut `Lax`. +Même si vous pouvez compter sur la valeur par défaut `SameSite=Lax` des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut `Lax`. ```plain example-good Set-Cookie: flavor=choco; SameSite=Lax @@ -78,8 +78,8 @@ Set-Cookie: flavor=choco; SameSite=Lax RewriteEngine on RewriteBase "/" - RewriteCond "%{HTTP_HOST}" "^example\.org$" [NC] - RewriteRule "^(.*)" "https://www.example.org/index.html" [R=301,L,QSA] + RewriteCond "%{HTTP_HOST}" "^example\.org$" [NC] + RewriteRule "^(.*)" "https://www.example.org/index.html" [R=301,L,QSA] RewriteRule "^(.*)\.ht$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:01:https://www.example.org:30/:SameSite=None:Secure] RewriteRule "^(.*)\.htm$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:02:https://www.example.org:30/:SameSite=None:Secure] RewriteRule "^(.*)\.html$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:03:https://www.example.org:30/:SameSite=None:Secure] diff --git a/files/fr/web/http/headers/tk/index.md b/files/fr/web/http/headers/tk/index.md index 6d84fd981b..359f460961 100644 --- a/files/fr/web/http/headers/tk/index.md +++ b/files/fr/web/http/headers/tk/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Headers/Tk --- {{HTTPSidebar}} -L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique à la demande correspondante. +L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique à la demande correspondante. <table class="properties"> <tbody> @@ -35,7 +35,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique ### Directives - ! - - : En construction. Le serveur d'origine teste actuellement sa communication de l'état du suivi. + - : En construction. Le serveur d'origine teste actuellement sa communication de l'état du suivi. - ? - : Dynamique. Le serveur d'origine a besoin de plus d'informations pour déterminer l'état du suivi. - G @@ -47,7 +47,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique - C - : Suivi avec consentement. Le serveur d'origine pense avoir reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil. - P - - : Consentement potentiel. Le serveur d'origine ne sait pas, en temps réel, s'il a reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil, mais promet de ne pas utiliser ou partager de données DNT:1 jusqu'à ce que ce consentement ait été déterminé. Il promet en outre de supprimer ou d'anonymiser de manière permanente dans les 48 heures toute donnée DNT:1 reçue pour laquelle ce consentement n'a pas été reçu. + - : Consentement potentiel. Le serveur d'origine ne sait pas, en temps réel, s'il a reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil, mais promet de ne pas utiliser ou partager de données DNT:1 jusqu'à ce que ce consentement ait été déterminé. Il promet en outre de supprimer ou d'anonymiser de manière permanente dans les 48 heures toute donnée DNT:1 reçue pour laquelle ce consentement n'a pas été reçu. - D - : Ne tient pas compte de DNT. Le serveur d'origine ne peut ou ne veut pas respecter une préférence de suivi reçue de l'user-agent demandeur. - U @@ -55,7 +55,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique ## Exemple -Un entête `Tk` pour une ressource qui prétend ne pas être suivie : +Un entête `Tk` pour une ressource qui prétend ne pas être suivie : Tk: N diff --git a/files/fr/web/http/headers/trailer/index.md b/files/fr/web/http/headers/trailer/index.md index 486e2e2311..bc7581d367 100644 --- a/files/fr/web/http/headers/trailer/index.md +++ b/files/fr/web/http/headers/trailer/index.md @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Headers/Trailer L'en-tête **Trailer** permet à l'expéditeur d'inclure des champs supplémentaires à la fin des blocs de messages pour fournir des métadonnées supplémentaires qui peuvent être générées de manière dynamique pendant que le corps du message sera envoyé, il peut s'agir de la vérification de l'intégrité du message, une signature numérique, ou encore un statut après le traitement. -> **Note :** L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer". +> **Note :** L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer". <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/vary/index.md b/files/fr/web/http/headers/vary/index.md index 1d478a7cec..e5eaf89d4f 100644 --- a/files/fr/web/http/headers/vary/index.md +++ b/files/fr/web/http/headers/vary/index.md @@ -11,9 +11,9 @@ translation_of: Web/HTTP/Headers/Vary --- {{HTTPSidebar}} -L'en-tête HTTP **`Vary`** détermine comment les en-têtes de requêtes futures sont associés pour décider si une réponse en cache peut être réutilisée plutôt que de solliciter à nouveau le serveur d'origine. Il est utilisé par le serveur pour indiquer quels en-têtes sont utilisés pour représenter une resource dans un algorithme de [négociation de contenu](/en-US/docs/Web/HTTP/Content_negotiation). +L'en-tête HTTP **`Vary`** détermine comment les en-têtes de requêtes futures sont associés pour décider si une réponse en cache peut être réutilisée plutôt que de solliciter à nouveau le serveur d'origine. Il est utilisé par le serveur pour indiquer quels en-têtes sont utilisés pour représenter une resource dans un algorithme de [négociation de contenu](/en-US/docs/Web/HTTP/Content_negotiation). -L'en-tête `Vary` doit être renseigné de manière identique sur une réponse {{HTTPStatus("304")}} `Not Modified` à ce qu'elle aurait été sur la réponse {{HTTPStatus("200")}} `OK` correspondante. +L'en-tête `Vary` doit être renseigné de manière identique sur une réponse {{HTTPStatus("304")}} `Not Modified` à ce qu'elle aurait été sur la réponse {{HTTPStatus("200")}} `OK` correspondante. <table class="properties"> <tbody> @@ -36,15 +36,15 @@ L'en-tête `Vary` doit être renseigné de manière identique sur une réponse ## Directives - \* - - : Chaque requête pour une URL doit être traitée comme une requête unique à ne pas mettre en cache. Une meilleure manière de l'indiquer est d'utiliser {{HTTPHeader("Cache-Control")}}`: private`, qui est plus clair à lire et signale aussi que l'objet ne doit jamais être mis en cache. + - : Chaque requête pour une URL doit être traitée comme une requête unique à ne pas mettre en cache. Une meilleure manière de l'indiquer est d'utiliser {{HTTPHeader("Cache-Control")}}`: private`, qui est plus clair à lire et signale aussi que l'objet ne doit jamais être mis en cache. - \<header-name> - : Une liste séparé par des virgules de noms d'en-tête à prendre en compte lorsqu'il est décidé si une réponse en cache peut être utilisée ou non. ## Examples -### Service dynamique +### Service dynamique -Lorsque l'en-tête `Vary: User-Agent` est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le [Cloaking](https://en.wikipedia.org/wiki/Cloaking) n'est pas intentionel. +Lorsque l'en-tête `Vary: User-Agent` est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le [Cloaking](https://en.wikipedia.org/wiki/Cloaking) n'est pas intentionel. Vary: User-Agent diff --git a/files/fr/web/http/headers/x-content-type-options/index.md b/files/fr/web/http/headers/x-content-type-options/index.md index a40640e8f4..78f14cc2ed 100644 --- a/files/fr/web/http/headers/x-content-type-options/index.md +++ b/files/fr/web/http/headers/x-content-type-options/index.md @@ -16,7 +16,7 @@ Cet en-tête a été introduit par Microsoft dans IE 8 comme un moyen pour les w Les testeurs de sécurité du site s'attendent généralement à ce que cet en-tête soit défini. -> **Note :** `X-Content-Type-Options` ne s'appliquent qu'au [blocage des demandes par `nosniff`](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?) pour les [destinations de demandes](https://fetch.spec.whatwg.org/#concept-request-destination) de "`script`" et "`style`". Il permet également le [blocage en lecture croisé (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb) pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG `image/svg+xml`). +> **Note :** `X-Content-Type-Options` ne s'appliquent qu'au [blocage des demandes par `nosniff`](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?) pour les [destinations de demandes](https://fetch.spec.whatwg.org/#concept-request-destination) de "`script`" et "`style`". Il permet également le [blocage en lecture croisé (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb) pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG `image/svg+xml`). <table class="properties"> <tbody> @@ -49,7 +49,7 @@ Les testeurs de sécurité du site s'attendent généralement à ce que cet en-t - `text/html` - `text/plain` - `text/json`, `application/json` ou tout autre type avec une extension JSON: `*/*+json` - - `text/xml`, `application/xml` ou tout autre type avec une extension XML: `*/*+xml` (hors `image/svg+xml`) + - `text/xml`, `application/xml` ou tout autre type avec une extension XML: `*/*+xml` (hors `image/svg+xml`) ## Caractéristiques diff --git a/files/fr/web/http/index.md b/files/fr/web/http/index.md index 4ab12e0805..f26dc5e98a 100644 --- a/files/fr/web/http/index.md +++ b/files/fr/web/http/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP --- {{HTTPSidebar}} -**_<i lang="en">Hypertext Transfer Protocol</i> (HTTP) (ou protocole de transfert hypertexte en français)_** est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) servant à transmettre des documents hypermédias, comme HTML. Il a été conçu la communication entre les navigateurs web et les serveurs web mais peut également être utilisé à d'autres fins. Il suit le modèle classique [client-serveur](https://fr.wikipedia.org/wiki/Client-serveur) : un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un [protocole sans état](https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat), ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. +**_<i lang="en">Hypertext Transfer Protocol</i> (HTTP) (ou protocole de transfert hypertexte en français)_** est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) servant à transmettre des documents hypermédias, comme HTML. Il a été conçu la communication entre les navigateurs web et les serveurs web mais peut également être utilisé à d'autres fins. Il suit le modèle classique [client-serveur](https://fr.wikipedia.org/wiki/Client-serveur) : un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un [protocole sans état](https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat), ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. ## Tutoriels diff --git a/files/fr/web/http/link_prefetching_faq/index.md b/files/fr/web/http/link_prefetching_faq/index.md index c640d373d2..8b78474e72 100644 --- a/files/fr/web/http/link_prefetching_faq/index.md +++ b/files/fr/web/http/link_prefetching_faq/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/HTTP/Link_prefetching_FAQ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens --- -### Qu’est ce que le préchargement de liens ? +### Qu’est ce que le préchargement de liens ? Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou _précharger_ les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur. @@ -17,17 +17,17 @@ Le préchargement de liens est un mécanisme du navigateur qui utilise le temps À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé. -### Quelles sont les cibles à précharger ? +### Quelles sont les cibles à précharger ? -Le navigateur cherche soit une balise HTML `link`, soit un en-tête HTTP `Link:` avec un type de relation `next` ou `prefetch`. Ci-dessous, un exemple d’utilisation de la balise `link` : +Le navigateur cherche soit une balise HTML `link`, soit un en-tête HTTP `Link:` avec un type de relation `next` ou `prefetch`. Ci-dessous, un exemple d’utilisation de la balise `link` : <link rel="prefetch" href="/images/big.jpeg"> -La même cible à précharger, cette fois avec un en-tête HTTP `Link:` : +La même cible à précharger, cette fois avec un en-tête HTTP `Link:` : Link: </images/big.jpeg>; rel=prefetch -L’en-tête `Link:` peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML `meta` : +L’en-tête `Link:` peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML `meta` : <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch"> @@ -37,77 +37,77 @@ Le format pour l’en-tête `Link:`est décrit dans le [RFC 2068](http://tools.i Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes. -Quelques exemples en plus, ci-dessous : +Quelques exemples en plus, ci-dessous : <link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> -### Les balises ancres (\<a>) sont-elles préchargées ? +### Les balises ancres (\<a>) sont-elles préchargées ? Non, seulement les balises `<link>` avec une relation de type `next` ou `prefetch` sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises \<a>, lesquelles devront inclure un type de relation `next` ou `prefetch`. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts. -### Le préchargement de liens est-il respectueux des standards ? +### Le préchargement de liens est-il respectueux des standards ? Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens ([Section 6.12: types de liens (fr)](http://www.la-grange.net/w3c/html4.01/types.html#h-6.12)). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours. -### Comment le temps disponible du navigateur est-il déterminé ? +### Comment le temps disponible du navigateur est-il déterminé ? Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API `nsIWebProgressListener`. On attache un écouteur à l’objet de haut-niveau `nsIWebProgress` ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire `onLoad` se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger. -### Que se passe-t-il si je clique sur un lien pendant un préchargement ? +### Que se passe-t-il si je clique sur un lien pendant un préchargement ? Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type `Accept-Ranges: bytes`. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range. -### Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ? +### Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ? Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau. -### Existe-t-il des restrictions sur ce qui peut être préchargé ? +### Existe-t-il des restrictions sur ce qui peut être préchargé ? -Oui, uniquement les URL http\:// (et, à partir de {{ Gecko("1.9.1") }}, https\://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise \<link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type `rel=prefetch`, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées. +Oui, uniquement les URL http\:// (et, à partir de {{ Gecko("1.9.1") }}, https\://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise \<link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type `rel=prefetch`, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées. -### Mozilla peut-il précharger un document d’un hôte différent ? +### Mozilla peut-il précharger un document d’un hôte différent ? Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur. -### Les requêtes préchargées contiennent-elles un en-tête `Referer:` ? +### Les requêtes préchargées contiennent-elles un en-tête `Referer:` ? Oui, les requêtes préchargées incluent une entête HTTP `Referer:` qui indique le document duquel la cible de préchargement a été extraite. Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un `href` vers le document préchargé en spécifiant un en-tête de réponse HTTP `Cache-control: must-revalidate`. Cet en-tête permet la mise en cache mais requiert une requête de validation `If-Modified-Since` ou `If-None-Match` pour que le document soit servi à partir du cache du navigateur. -### En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ? +### En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ? -Oui, l'en-tête suivant est envoyé avec chaque requête préchargée : +Oui, l'en-tête suivant est envoyé avec chaque requête préchargée : X-moz: prefetch Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla. -### Existe-t-il une préférence pour désactiver le préchargement de liens ? +### Existe-t-il une préférence pour désactiver le préchargement de liens ? -Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via `about:config`) : +Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via `about:config`) : user_pref("network.prefetch-next", false); Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence. -### Et pour les gens qui payent à la bande passante utilisée ? +### Et pour les gens qui payent à la bande passante utilisée ? -En fait, il y a deux façons d'aborder ce problème : +En fait, il y a deux façons d'aborder ce problème : 1. Les sites Web peuvent provoquer le chargement de choses de façon transparente en utilisant des hacks JS/DOM. 2. Le préchargement est une fonctionnalité du navigateur, les utilisateurs devraient pouvoir le désactiver facilement. Il est important que les sites web adoptent la balise `<link>` pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise `<link>` donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise `<link>` encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut. -### Quels navigateurs supportent le préchargement de liens ? +### Quels navigateurs supportent le préchargement de liens ? Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. [Testez](http://gemal.dk/browserspy/prefetch.php) votre navigateur pour vérifier s'il supporte le préchargement de liens. -### D'autres questions ? +### D'autres questions ? -Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-) +Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-) #### Voir également @@ -115,5 +115,5 @@ Si vous avez des questions ou des commentaires sur le préchargement de liens, n ### Informations sur le document original -- Auteur(s) :Darin Fisher (darin at meer dot net) -- Date de dernière mise à jour : 3 mars 2003 +- Auteur(s) :Darin Fisher (darin at meer dot net) +- Date de dernière mise à jour : 3 mars 2003 diff --git a/files/fr/web/http/methods/connect/index.md b/files/fr/web/http/methods/connect/index.md index 961b30019e..76631db22a 100644 --- a/files/fr/web/http/methods/connect/index.md +++ b/files/fr/web/http/methods/connect/index.md @@ -40,7 +40,7 @@ Par exemple, la méthode `CONNECT` peut être utilisée pour accéder à des sit </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a diff --git a/files/fr/web/http/methods/delete/index.md b/files/fr/web/http/methods/delete/index.md index c6c87d11ef..d7b564c746 100644 --- a/files/fr/web/http/methods/delete/index.md +++ b/files/fr/web/http/methods/delete/index.md @@ -37,7 +37,7 @@ La **méthode HTTP DELETE** supprime la ressource indiquée. </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a @@ -60,7 +60,7 @@ La **méthode HTTP DELETE** supprime la ressource indiquée. ### Réponses -Si une méthode `DELETE` est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles : +Si une méthode `DELETE` est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles : - Un code de statut {{HTTPStatus("202")}} (`Accepted`) si l'action est en passe de réussir mais n'a pas encore été confirmée. - Un code de statut {{HTTPStatus("204")}} (`No Content`) si l'action a été confirmée et qu'aucune information supplémentaire n'est à fournir. diff --git a/files/fr/web/http/methods/head/index.md b/files/fr/web/http/methods/head/index.md index 6a46b1424e..b965dc690f 100644 --- a/files/fr/web/http/methods/head/index.md +++ b/files/fr/web/http/methods/head/index.md @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Méthode/HEAD --- {{HTTPSidebar}} -La **méthode HTTP `HEAD`** demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une ressource volumineuse, par exemple pour économiser de la bande passante. +La **méthode HTTP `HEAD`** demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une ressource volumineuse, par exemple pour économiser de la bande passante. Une réponse issue d'une requête `HEAD` ne doit pas avoir de corps. Si tel est le cas, elle doit être ignorée. Toutefois, les {{glossary("En-têtes d'entité", "en-têtes d'entité")}} décrivant le contenu du corps, comme {{HTTPHeader("Content-Length")}}, peuvent être inclus dans la réponse. Ils ne sont pas liés au corps de la réponse `HEAD` , qui doit être vide, mais au corps d'une réponse issue d'une requête similaire utilisant la méthode {{HTTPMethod("GET")}}. @@ -40,7 +40,7 @@ Si le résultat d'une requête `HEAD` montre qu'une ressource mise en cache apr </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a diff --git a/files/fr/web/http/methods/index.md b/files/fr/web/http/methods/index.md index 3c00b9d47d..3d50cb6bcb 100644 --- a/files/fr/web/http/methods/index.md +++ b/files/fr/web/http/methods/index.md @@ -10,14 +10,14 @@ original_slug: Web/HTTP/Méthode --- {{HTTPSidebar}} -HTTP définit un ensemble de **méthodes de requête** qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées _verbes HTTP_. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (_safe_), idempotente ou être mise en cache (_cacheable_)). +HTTP définit un ensemble de **méthodes de requête** qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées _verbes HTTP_. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (_safe_), idempotente ou être mise en cache (_cacheable_)). - [`GET`](/fr/docs/Web/HTTP/Méthode/GET) - : La méthode `GET` demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données. - [`HEAD`](/fr/docs/Web/HTTP/Méthode/HEAD) - : La méthode `HEAD` demande une réponse identique à une requête GET pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-tête). - [`POST`](/fr/docs/Web/HTTP/Méthode/POST) - - : La méthode `POST` est utilisée pour envoyer une entité vers la ressource indiquée. Cela entraîne généralement un changement d'état ou des effets de bord sur le serveur. + - : La méthode `POST` est utilisée pour envoyer une entité vers la ressource indiquée. Cela entraîne généralement un changement d'état ou des effets de bord sur le serveur. - [`PUT`](/fr/docs/Web/HTTP/Méthode/PUT) - : La méthode `PUT` remplace toutes les représentations actuelles de la ressource visée par le contenu de la requête. - [`DELETE`](/fr/docs/Web/HTTP/Méthode/DELETE) diff --git a/files/fr/web/http/methods/options/index.md b/files/fr/web/http/methods/options/index.md index 842dd3ceae..5486fe91df 100644 --- a/files/fr/web/http/methods/options/index.md +++ b/files/fr/web/http/methods/options/index.md @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Méthode/OPTIONS --- {{HTTPSidebar}} -La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (\*) pour interroger le serveur dans sa globalité. +La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (\*) pour interroger le serveur dans sa globalité. <table class="properties"> <tbody> @@ -32,7 +32,7 @@ La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de com </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a @@ -58,7 +58,7 @@ Pour déterminer les méthodes HTTP supportées par le serveur, on peut utiliser curl -X OPTIONS http://example.org -i -La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées : +La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées : HTTP/1.1 200 OK Allow: OPTIONS, GET, HEAD, POST @@ -69,9 +69,9 @@ La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthode x-ec-custom-error: 1 Content-Length: 0 -### Requête de pré-vérification cross-origin [CORS](https://developer.mozilla.org/fr/docs/Glossaire/CORS) +### Requête de pré-vérification cross-origin [CORS](https://developer.mozilla.org/fr/docs/Glossaire/CORS) -En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérification est envoyée avec la méthode `OPTIONS` afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode `POST`. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés `X-PINGOTHER` et `Content-Type`. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification. +En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérification est envoyée avec la méthode `OPTIONS` afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode `POST`. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés `X-PINGOTHER` et `Content-Type`. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification. OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other @@ -84,7 +84,7 @@ En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérif Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type -Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes `POST`, `GET`, and `OPTIONS` sont utilisables pour interroger la ressource. Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS. +Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes `POST`, `GET`, and `OPTIONS` sont utilisables pour interroger la ressource. Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS. HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT diff --git a/files/fr/web/http/methods/post/index.md b/files/fr/web/http/methods/post/index.md index 9adf8bd523..a483ebb3af 100644 --- a/files/fr/web/http/methods/post/index.md +++ b/files/fr/web/http/methods/post/index.md @@ -14,13 +14,13 @@ La **méthode HTTP `POST`** envoie des données au serveur. Le type du corps de La différence entre `PUT` et {{HTTPMethod("POST")}} tient au fait que `PUT` est une méthode idempotente. Une requête `PUT`, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes `POST` successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande. -Une requête `POST` est habituellement envoyée via un [formulaire HTML](/en-US/docs/Web/Guide/HTML/Forms) et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut *{{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}}* : +Une requête `POST` est habituellement envoyée via un [formulaire HTML](/en-US/docs/Web/Guide/HTML/Forms) et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut *{{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}}* : -- `application/`_`x-www-form-urlencoded` : les valeurs sont encodées sous forme de couples clé-valeur séparés par `'&'`, avec un `'='` entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires (utilisez `multipart/form-data` à la place)_ +- `application/`_`x-www-form-urlencoded` : les valeurs sont encodées sous forme de couples clé-valeur séparés par `'&'`, avec un `'='` entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires (utilisez `multipart/form-data` à la place)_ - _`multipart/form-data`_ - _`text/plain`_ -Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, `la méthode POST` est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes : +Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, `la méthode POST` est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes : - Annotation de ressources existantes - Publication d'un message sur un tableau d'affichage, un groupe de discussion, une liste de diffusion, ou un groupe similaire d'articles; @@ -53,7 +53,7 @@ Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a> </th> <td>Oui</td> @@ -67,7 +67,7 @@ Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML ## Exemple -Un formulaire simple utilisant le type de contenu par défaut `application/x-www-form-urlencoded` : +Un formulaire simple utilisant le type de contenu par défaut `application/x-www-form-urlencoded` : POST / HTTP/1.1 Host: foo.com @@ -76,7 +76,7 @@ Un formulaire simple utilisant le type de contenu par défaut `application/x-www say=Hi&to=Mom -Un formulaire utilisant le type de contenu `multipart/form-data` : +Un formulaire utilisant le type de contenu `multipart/form-data` : POST /test.html HTTP/1.1 Host: example.org diff --git a/files/fr/web/http/methods/trace/index.md b/files/fr/web/http/methods/trace/index.md index 5869ac0289..a11f0d8d26 100644 --- a/files/fr/web/http/methods/trace/index.md +++ b/files/fr/web/http/methods/trace/index.md @@ -12,7 +12,7 @@ original_slug: Web/HTTP/Méthode/TRACE La **méthode HTTP `TRACE`** effectue un test de rebouclage des messages le long du chemin vers la ressource cible, fournissant ainsi un mécanisme de débogage utile. -Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de `message/http`. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête. +Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de `message/http`. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête. <table class="properties"> <tbody> diff --git a/files/fr/web/http/overview/index.md b/files/fr/web/http/overview/index.md index 62cf4ccc68..a67e0d4317 100644 --- a/files/fr/web/http/overview/index.md +++ b/files/fr/web/http/overview/index.md @@ -29,7 +29,7 @@ Chaque requête individuelle est envoyée au serveur, qui la traite et fournit u En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP. -### Le client : l'agent utilisateur +### Le client : l'agent utilisateur L'_agent utilisateur_ correspond à n'importe quel outil qui agit pour le compte de l'utilisateur. Ce rôle est principalement rempli par le navigateur web ; les exceptions étant les programmes utilisés par des ingénieurs et développeurs web pour le débogage de leurs applications. @@ -47,7 +47,7 @@ D'une part, un serveur n'est pas nécessairement une machine unique et d'autre p ### Les _proxys_ -Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées **proxy**. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches : +Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées **proxy**. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches : - mettre en cache (le cache peut alors être public ou privé, comme le cache du navigateur) - filtrer (comme un antivirus, contrôle parental…) diff --git a/files/fr/web/http/public_key_pinning/index.md b/files/fr/web/http/public_key_pinning/index.md index cd14e99c24..1e60493eb0 100644 --- a/files/fr/web/http/public_key_pinning/index.md +++ b/files/fr/web/http/public_key_pinning/index.md @@ -8,11 +8,11 @@ tags: translation_of: Web/HTTP/Public_Key_Pinning original_slug: Web/Security/Public_Key_Pinning --- -L'extention **Public Key Pinning pour HTTP** (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques [MITM](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) avec des certificats contrefaits. +L'extention **Public Key Pinning pour HTTP** (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques [MITM](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) avec des certificats contrefaits. -> **Note :** La Public Key Pinning décrite ici est différente du limité [preload list based key pinning](http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html) introduit dans Firefox 32. +> **Note :** La Public Key Pinning décrite ici est différente du limité [preload list based key pinning](http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html) introduit dans Firefox 32. -Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web. +Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web. HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, _Trust on First Use_). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur. @@ -20,27 +20,27 @@ HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, _T ## Activer HPKP -Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP `Public-Key-Pins` HTTP quand le site est accédé via HTTPS : +Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP `Public-Key-Pins` HTTP quand le site est accédé via HTTPS : Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"] - `pin-sha256` - - : La chaîne de caractère entre guillemets est l’empreinte du *Subject Public Key Information* (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé. + - : La chaîne de caractère entre guillemets est l’empreinte du *Subject Public Key Information* (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé. - `max-age` - : Le temps, en seconde, pendant laquelle le navigateur doit mémoriser que le site ne doit être visité qu'avec l'une des clés épinglées. - `includeSubdomains` {{ optional_inline() }} - - : Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel. + - : Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel. - `report-uri` {{ optional_inline() }} - : Si ce paramètre optionnel est spécifié, les échecs de validation sont notifiés à l'URL donnée. -> **Note :** La spécification actuelle **impose** d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas). +> **Note :** La spécification actuelle **impose** d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas). > **Note :** Firefox n'implémente pas encore les rapports de violation d'épinglage. Chrome les implémente à partie de la version 46. > > - Firefox: [Bug 1091176 - Implement report-uri directive for HPKP](https://bugzilla.mozilla.org/show_bug.cgi?id=1091176) et [Bug 787133 - (hpkp) Implement Public Key Pinning Extension for HTTP (HPKP)](https://bugzilla.mozilla.org/show_bug.cgi?id=787133) > - Chrome: <https://developers.google.com/web/updates/2015/09/HPKP-reporting-with-chrome-46> , [HTTP Public Key Pinning violating reporting](https://www.chromestatus.com/feature/4669935557017600) et [Issue 445793: HPKP Reporting on invalid pins](https://code.google.com/p/chromium/issues/detail?id=445793) -### Extraire la clé publique encodé en Base64 +### Extraire la clé publique encodé en Base64 En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64. @@ -56,13 +56,13 @@ Les commandes suivantes vous aideront à extraire la clé publique et à l'encod openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 -### +### ### Exemple d'entête HPKP Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report" -Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage **pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="** représente la clé de sauvegarde. **max-age=5184000** dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car **includeSubdomains** est présent. Enfin, **report-uri="https\://www\.example.net/hpkp-report"** indique où envoyer les rapports d'erreurs de validation. +Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage **pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="** représente la clé de sauvegarde. **max-age=5184000** dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car **includeSubdomains** est présent. Enfin, **report-uri="https\://www\.example.net/hpkp-report"** indique où envoyer les rapports d'erreurs de validation. @@ -70,27 +70,27 @@ Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez. -> **Note :** Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur. +> **Note :** Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur. -Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes `pin-sha256="..."` : +Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes `pin-sha256="..."` : #### Apache Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains" -**Note :** Cela demande le module `mod_headers` activé. +**Note :** Cela demande le module `mod_headers` activé. #### Nginx add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains'; -**Note :** Cela demande le module `ngx_http_headers_module`. +**Note :** Cela demande le module `ngx_http_headers_module`. #### Lighttpd - setenv.add-response-header = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains") + setenv.add-response-header = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains") -**Note:** Cela demande le module `mod_setenv` chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) : +**Note:** Cela demande le module `mod_setenv` chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) : server.modules += ( "mod_setenv" ) diff --git a/files/fr/web/http/redirections/index.md b/files/fr/web/http/redirections/index.md index c846b4e955..b263d81542 100644 --- a/files/fr/web/http/redirections/index.md +++ b/files/fr/web/http/redirections/index.md @@ -113,7 +113,7 @@ Lorsque vous restructurez des sites Web, les URL des ressources changent. Même Les requêtes {{Glossary("safe", "Unsafe")}} modifient l'état du serveur et l'utilisateur ne devrait pas les rejouer par inadvertance. Typiquement, vous ne voulez pas que vos utilisateurs renvoient des requêtes {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} ou {{HTTPMethod("DELETE")}}. Si vous ne vous contentez que d'envoyer la réponse à la suite de cette requête, un simple clic sur le bouton de rechargement (éventuellement après un message de confirmation), renvoie la demande. -Dans ce cas, le serveur peut renvoyer une réponse {{HTTPStatus("303")}} (See Other) qui contiendra les bonnes informations, mais si le bouton de rechargement est pressé, seule cette page est réaffichée, sans rejouer les demandes non sécurisées. +Dans ce cas, le serveur peut renvoyer une réponse {{HTTPStatus("303")}} (See Other) qui contiendra les bonnes informations, mais si le bouton de rechargement est pressé, seule cette page est réaffichée, sans rejouer les demandes non sécurisées. ### Réponses temporaires aux longues requêtes diff --git a/files/fr/web/javascript/a_re-introduction_to_javascript/index.md b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md index f885ef3bcd..8284c0980e 100644 --- a/files/fr/web/javascript/a_re-introduction_to_javascript/index.md +++ b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md @@ -19,7 +19,7 @@ Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. Ja Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'[Ecma International](https://www.ecma-international.org/), une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard [ECMAScript](/fr/docs/Glossary/ECMAScript) en 1997. Ce standard a reçu une mise à jour importante appelée [ECMAScript edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm) en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures, a été publiée en juin 2015. -> **Note :** Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. +> **Note :** Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que [Node.js](https://nodejs.org/). Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que [Apache CouchDB](https://couchdb.apache.org/), les ordinateurs embarqués ou encore des environnements de bureaux comme [GNOME](https://www.gnome.org/) (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux), etc. @@ -151,7 +151,7 @@ isNaN([1]) // false isNaN([1,2]) // true ``` -JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) : +JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) : ```js 1 / 0; // Infinity @@ -259,7 +259,7 @@ for (var variableVar = 0; variableVar < 5; variableVar++) { Si on déclare une variable sans lui affecter aucune valeur, son type sera alors `undefined`. -JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec `var`, c'est la fonction qui gère la portée d'une variable déclarée avec `var`. Aussi, si une variable est définie avec `var` au sein d'une instruction conditionnelle avec `if`, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe. +JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec `var`, c'est la fonction qui gère la portée d'une variable déclarée avec `var`. Aussi, si une variable est définie avec `var` au sein d'une instruction conditionnelle avec `if`, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe. ## Les opérateurs @@ -990,7 +990,7 @@ function parentFunc() { Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieur de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose. -C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir. +C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir. ## Les fermetures (_Closures_) diff --git a/files/fr/web/javascript/about_javascript/index.md b/files/fr/web/javascript/about_javascript/index.md index 9df9e079ce..63019c82b9 100644 --- a/files/fr/web/javascript/about_javascript/index.md +++ b/files/fr/web/javascript/about_javascript/index.md @@ -12,9 +12,9 @@ original_slug: Web/JavaScript/A_propos ## Qu'est-ce que JavaScript ? -[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est [orienté prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), multi-paradigme étant dynamique, impératif et fonctionnel à la fois +[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est [orienté prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), multi-paradigme étant dynamique, impératif et fonctionnel à la fois -Contrairement à une conception populaire, _JavaScript n'est pas « du Java interprété »_. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions `if`, les boucles `for` et `while`, les blocs `switch` et `try..catch` fonctionnent de la même manière que dans ces langages (ou presque). +Contrairement à une conception populaire, _JavaScript n'est pas « du Java interprété »_. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions `if`, les boucles `for` et `while`, les blocs `switch` et `try..catch` fonctionnent de la même manière que dans ces langages (ou presque). JavaScript peut être employé en tant que langage [procédural](https://fr.wikipedia.org/wiki/Programmation_procédurale) ou [orienté objet](https://fr.wikipedia.org/wiki/Programmation_orientée_objet). Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires. @@ -35,7 +35,7 @@ En plus de ces implémentations, il existe d'autres moteurs JavaScript largement - [Carakan](https://my.opera.com/ODIN/blog/carakan-faq "https://my.opera.com/ODIN/blog/carakan-faq") est utilisé dans les anciennes versions d'Opera. - Le moteur [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29 "https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29") est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques). -Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le [DOM](/fr/docs/DOM) en JavaScript. +Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le [DOM](/fr/docs/DOM) en JavaScript. Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web. diff --git a/files/fr/web/javascript/data_structures/index.md b/files/fr/web/javascript/data_structures/index.md index a72af89b1b..d89ced992d 100644 --- a/files/fr/web/javascript/data_structures/index.md +++ b/files/fr/web/javascript/data_structures/index.md @@ -33,10 +33,10 @@ Le dernier standard ECMAScript définit 8 types de données : - {{Glossary("Undefined")}} - {{Glossary("Number", "Nombre")}} - {{Glossary("BigInt")}} (proposition pour ES2020) - - {{Glossary("String", "Chaîne de caractères")}} (String) + - {{Glossary("String", "Chaîne de caractères")}} (String) - {{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6) -- et le type {{Glossary("Object", "Objet")}} +- et le type {{Glossary("Object", "Objet")}} ## Les valeurs primitives @@ -87,7 +87,7 @@ const y = x + 1n; 9007199254740993n ``` -À l'instar des nombres classiques, on peut utiliser les opérateurs `+`, `*`, `-`, `**` et `%`. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible. +À l'instar des nombres classiques, on peut utiliser les opérateurs `+`, `*`, `-`, `**` et `%`. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible. Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec `if`, `||`, `&&`, `Boolean` et `!`. diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md index cad3505a3d..a27fb69fc4 100644 --- a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md +++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -64,7 +64,7 @@ Le rattachement des propriétés est détérminé selon que la propriété est d >hasOwnProperty()</a > - </code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a @@ -166,11 +166,11 @@ Le rattachement des propriétés est détérminé selon que la propriété est d ></code > <code - >- <a + >- <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols" >getOwnPropertySymbols()</a > </code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a @@ -257,7 +257,7 @@ Le rattachement des propriétés est détérminé selon que la propriété est d href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols" >getOwnPropertySymbols()</a ></code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md index 7e47857033..dded865285 100644 --- a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md +++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md @@ -190,7 +190,7 @@ function attemptMutation(v) { `Object.defineProperty` lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si `v` vaut `-0`, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si `v` vaut `+0`, `Number.NEGATIVE_ZERO` n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs. -L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}. +L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}. ## Égalité de valeurs nulles @@ -236,7 +236,7 @@ Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivé | `'toto'` | `NaN` | `false` | `false` | `false` | `false` | | `NaN` | `NaN` | `false` | `false` | `true` | `true` | -## Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte +## Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte En plus de la façon dont {{jsxref("Object.is")}} traite `NaN`, la spécificité d'`Object.is()` réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser [`===`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>). Même si on souhaite pouvoir comparer `NaN` avec lui-même et que ce test vaille `true`, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons. diff --git a/files/fr/web/javascript/eventloop/index.md b/files/fr/web/javascript/eventloop/index.md index 967b2e0ea8..b59e9b0468 100644 --- a/files/fr/web/javascript/eventloop/index.md +++ b/files/fr/web/javascript/eventloop/index.md @@ -94,11 +94,11 @@ while(true) { ### Zéro délai -Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout "The documentation about this has not yet been written; please consider contributing!") avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné. +Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout "The documentation about this has not yet been written; please consider contributing!") avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné. -L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). +L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). -Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout. +Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout. ```js (function() { @@ -132,7 +132,7 @@ Un web worker ou une `iframe` d'origine multiple (_cross origin_) possède sa pr ## Non bloquant -Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (_I/O_) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête [IndexedDB](/fr/docs/IndexedDB) ou d'une requête [XHR](/fr/docs/XMLHttpRequest), il reste possible de traiter d'autres éléments comme les saisies utilisateur. +Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (_I/O_) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête [IndexedDB](/fr/docs/IndexedDB) ou d'une requête [XHR](/fr/docs/XMLHttpRequest), il reste possible de traiter d'autres éléments comme les saisies utilisateur. Il existe certaines exceptions historiques comme `alert` ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, [certaines exceptions existent](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311) (mais relèvent généralement de bugs d'implémentation). diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.md b/files/fr/web/javascript/guide/details_of_the_object_model/index.md index 08e7f1d3b2..a662775f77 100644 --- a/files/fr/web/javascript/guide/details_of_the_object_model/index.md +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.md @@ -127,7 +127,7 @@ Cela montre une hiérarchie d'objets avec les objets suivants : - `Manager` est basé sur `Employee`. Il ajoute la propriété `reports` (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets `Employee`). - `WorkerBee` est également basé sur `Employee`. Il ajoute la propriété `projects` (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères). - `SalesPerson` est basé sur `WorkerBee`. Il ajoute la propriété `quota` (dont la valeur par défaut est 100). Il surcharge la propriété `dept` avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département. -- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». +- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». ## La création de la hiérarchie diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.md b/files/fr/web/javascript/guide/expressions_and_operators/index.md index ac93c75557..f030de6473 100644 --- a/files/fr/web/javascript/guide/expressions_and_operators/index.md +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.md @@ -267,7 +267,7 @@ En plus des opérations arithmétiques standards (+,-,\*,/), JavaScript fournit href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)" >Reste</a > - (<code>%</code>)<br /> + (<code>%</code>)<br /> </td> <td> Opérateur binaire. Renvoie le reste entier de la division entre les deux @@ -437,7 +437,7 @@ Les opérateurs de décalage sont énumérés dans le tableau qui suit. </td> <td> <code>9<<2</code> renvoie 36, car 1001, décalé de 2 bits à - gauche, devient 100100, dont la représentation en base 10 est 36. + gauche, devient 100100, dont la représentation en base 10 est 36. </td> </tr> <tr> @@ -454,7 +454,7 @@ Les opérateurs de décalage sont énumérés dans le tableau qui suit. </td> <td> <code>9>>2</code> renvoie 2, car 1001, décalé de 2 bits à droite, - devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car + devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car le signe est préservé. </td> </tr> @@ -770,7 +770,7 @@ L'opérateur `void` indique qu'une expression doit être évaluée sans retourne L'opérateur `void` peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel. -Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet. +Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet. ```html <A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A> diff --git a/files/fr/web/javascript/guide/functions/index.md b/files/fr/web/javascript/guide/functions/index.md index 7c4322b0f1..7671353ca5 100644 --- a/files/fr/web/javascript/guide/functions/index.md +++ b/files/fr/web/javascript/guide/functions/index.md @@ -488,7 +488,7 @@ var créerAnimal = function(nom) { // La fonction externe définit une variable } ``` -L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. +L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. ## Utiliser l'objet `arguments` @@ -580,7 +580,7 @@ console.log(arr); // [2, 4, 6] ## Fonctions fléchées -[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes. +[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes. Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de `this` rattaché à la fonction. Voir aussi [ce billet sur tech.mozfr.org sur les fonctions fléchées](https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees). @@ -597,7 +597,7 @@ var a = [ "Hydrogen", "Helium", "Lithium", - "Beryllium" + "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); @@ -613,13 +613,13 @@ Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre ```js function Personne() { // Le constructeur Personne() utilise `this` comme lui-même. - this.âge = 0; + this.âge = 0; setInterval(function grandir() { // En mode non-strict, la fonction grandir() définit `this` // avec l'objet global, qui est donc différent du `this` // défini par le constructeur Person(). - this.âge++; + this.âge++; }, 1000); } diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.md b/files/fr/web/javascript/guide/grammar_and_types/index.md index b0949d9c01..27bfab4cf7 100644 --- a/files/fr/web/javascript/guide/grammar_and_types/index.md +++ b/files/fr/web/javascript/guide/grammar_and_types/index.md @@ -60,7 +60,7 @@ Il existe trois types de déclarations de variable en JavaScript. Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés _identifiants_. Ces identifiants doivent respecter certaines règles. Un identifiant JavaScript doit commencer par une lettre, un tiret bas (\_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9). -À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule). +À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule). On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir [ce billet de blog, en anglais](https://mathiasbynens.be/notes/javascript-identifiers-es6)) au sein des identifiants. Il est également possible d'utiliser les \uXXXX [séquences d'échappement Unicode](<#littéraux chaînes>) comme caractères dans les identifiants. @@ -295,7 +295,7 @@ Bien que cette description couvre peu de types de données, ceux-ci vous permett ### Conversion de types de données -JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon : +JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon : ```js var réponse = 42; @@ -614,7 +614,7 @@ Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (_backslash_) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité. -En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : +En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : ```js var citation = "Il lit \"Bug Jargal\" de V. Hugo."; diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md index d50654f3a9..6082ecab58 100644 --- a/files/fr/web/javascript/guide/indexed_collections/index.md +++ b/files/fr/web/javascript/guide/indexed_collections/index.md @@ -171,7 +171,7 @@ Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (pa ```js let divs = document.getElementsByTagName('div'); for (let i = 0, div; div = divs[i]; i++) { - /* On effectue un traitement sur les div */ + /* On effectue un traitement sur les div */ } ``` diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md index bef70f4b38..aa03492eed 100644 --- a/files/fr/web/javascript/guide/keyed_collections/index.md +++ b/files/fr/web/javascript/guide/keyed_collections/index.md @@ -33,7 +33,7 @@ sayings.has("bird"); // false sayings.delete("dog"); for (var [key, value] of sayings) { - console.log(key + " goes " + value); + console.log(key + " goes " + value); } // "cat goes meow" // "elephant goes toot" @@ -88,7 +88,7 @@ module.exports = Public; Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément `Set` ne peut y apparaître qu'une seule fois, il est unique pour cette instance de `Set`. -Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète. +Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète. ```js var monEnsemble = new Set(); diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.md b/files/fr/web/javascript/guide/loops_and_iteration/index.md index 8adb3d18af..af4647d00f 100644 --- a/files/fr/web/javascript/guide/loops_and_iteration/index.md +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.md @@ -327,7 +327,7 @@ L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui instruction } -Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés : +Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés : ```js let arr = [3, 5, 7]; diff --git a/files/fr/web/javascript/guide/meta_programming/index.md b/files/fr/web/javascript/guide/meta_programming/index.md index 8564629cd6..80c99b7eb3 100644 --- a/files/fr/web/javascript/guide/meta_programming/index.md +++ b/files/fr/web/javascript/guide/meta_programming/index.md @@ -319,7 +319,7 @@ Le tableau suivant résume les différentes trappes disponibles pour les objets <p> Le résultat de <code>ownKeys</code> est une liste.<br /><br />Le type de chaque élément de la liste est soit une - {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br /><br />La + {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br /><br />La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.<br /><br />Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.md b/files/fr/web/javascript/guide/numbers_and_dates/index.md index 33d7e90ae3..cfe7f886cc 100644 --- a/files/fr/web/javascript/guide/numbers_and_dates/index.md +++ b/files/fr/web/javascript/guide/numbers_and_dates/index.md @@ -146,7 +146,7 @@ Le tableau qui suit liste certaines des propriétés de `Number`. <tr> <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> <td> - Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 + Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 ou <code>−9007199254740991</code>) </td> </tr> @@ -204,7 +204,7 @@ Le tableau suivant liste les méthodes de l'objet `Math`. | {{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}} | Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians) | | {{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}} | Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians) | | {{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}} | Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians). | -| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques | +| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques | | {{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}} | Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné | | {{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}} | Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules | | {{jsxref("Math.random", "random()")}} | Renvoie un nombre aléatoire compris entre 0 et 1 | diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md index 1e1dbb1a9d..1d722fdc94 100644 --- a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md @@ -85,7 +85,7 @@ Les assertions indiquent les conditions selon lesquelles il est possible d'avoir seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code >/(?<!-)\d+/.exec('3')</code > - cible "3".<br /> <code>/(?<!-)\d+/.exec('-3')</code> ne trouve + cible "3".<br /> <code>/(?<!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe </p> </td> diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md index 1d37d5b70d..a961431760 100644 --- a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md @@ -32,8 +32,8 @@ Les classes de caractères permettent de distinguer différents ensembles de car un caractère de saut de ligne. </p> <p> - Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab - nain en cours de croissance" mais pas à 'nain'. + Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab + nain en cours de croissance" mais pas à 'nain'. </p> <p> Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point @@ -114,7 +114,7 @@ Les classes de caractères permettent de distinguer différents ensembles de car >. </p> <p> - Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". + Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". </p> </td> </tr> diff --git a/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md index e0abf47c98..0810295fe6 100644 --- a/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md @@ -121,7 +121,7 @@ Cette page fournit une « antisèche » sur l'ensemble des fonctionnal </td> <td> <p> - Correspond à un caractère de contrôle représenté par sa <a href="https://fr.wikipedia.org/wiki/Notation_caret">notation caret</a>, où "X" est une lettre de A à Z (correspondant respectivement aux points de code <code>U+0001</code><em> à </em><code>U+001F</code>). Ainsi, <code>/\cM/</code> correspondra à "\r" dans "\r\n". + Correspond à un caractère de contrôle représenté par sa <a href="https://fr.wikipedia.org/wiki/Notation_caret">notation caret</a>, où "X" est une lettre de A à Z (correspondant respectivement aux points de code <code>U+0001</code><em> à </em><code>U+001F</code>). Ainsi, <code>/\cM/</code> correspondra à "\r" dans "\r\n". </p> </td> </tr> diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md index 1233a65060..6c35be5342 100644 --- a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md @@ -46,7 +46,7 @@ Les groupes et intervalles permettent de représenter des groupes ou des interva pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre - l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les + l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : diff --git a/files/fr/web/javascript/guide/regular_expressions/index.md b/files/fr/web/javascript/guide/regular_expressions/index.md index 2010b7ff34..d97bc904e4 100644 --- a/files/fr/web/javascript/guide/regular_expressions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/index.md @@ -631,7 +631,7 @@ Afin d'échapper les informations saisies par l'utilisateur et de traîter les c function escapeRegExp(string){ // $& correspond à la chaîne correspondante // dans son intégralité - return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } ``` @@ -645,13 +645,13 @@ Les parenthèses encadrant une partie du motif de l'expression régulière peuve Ainsi, le motif `/Chapitre (\d+)\.\d*/` utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (`\d` correspond à un chiffre et `+` indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (`\d` correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant. -Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'. +Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'. Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser `?:`. Ainsi, `(?:\d+)` correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants. ## Utiliser les expressions rationnelles -Les expresssions régulières sont utilisées avec les méthodes `test` et `exec` de l'objet `RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). +Les expresssions régulières sont utilisées avec les méthodes `test` et `exec` de l'objet `RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). | Méthode | Description | | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -843,7 +843,7 @@ pour obtenir le même résultat. Le comportement du marqueur `'g'` est différent selon qu'il est utilisé avec [`exec()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec) ou avec [`match()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match). Pour `match()`, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour `exec()`, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à `exec()`, le marqueur `'g'` permet d'avoir une progression itérative. -Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne. +Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne. ## Exemples diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md index f7b7b5c99c..732a3113f9 100644 --- a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md @@ -42,34 +42,34 @@ Les séquences d'échappement pour les propriétés Unicode permettent de distin | `\p{Dash_Punctuation} \p{UnicodePropertyName=Dash_Punctuation}` | | | `\p{Decimal_Number} \p{UnicodePropertyName=Decimal_Number}` | | | `\p{Enclosing_Mark} \p{UnicodePropertyName=Enclosing_Mark}` | | -| `\p{Final_Punctuation} \p{UnicodePropertyName=Final_Punctuation}` | | -| `\p{Format} \p{UnicodePropertyName=Format}` | | -| `\p{Initial_Punctuation} \p{UnicodePropertyName=Initial_Punctuation}` | | -| `\p{Letter} \p{UnicodePropertyName=Letter}` | | -| `\p{Letter_Number} \p{UnicodePropertyName=Line_Separator}` | | -| `\p{Lowercase_Letter} \p{UnicodePropertyName=Lowercase_Letter}` | | -| `\p{Mark} \p{UnicodePropertyName=Mark}` | | -| `\p{Math_Symbol;} \p{UnicodePropertyName=Math_Symbol}` | | -| `\p{Modifier_Letter} \p{UnicodePropertyName=Modifier_Letter}` | | -| `\p{Modifier_Symbol} \p{UnicodePropertyName=Modifier_Symbol}` | | -| `\p{Nonspacing_Mark} \p{UnicodePropertyName=Nonspacing_Mark}` | | -| `\p{Number} \p{UnicodePropertyName=Number}` | | -| `\p{Open_Punctuation} \p{UnicodePropertyName=Open_Punctuation}` | | -| `\p{Other} \p{UnicodePropertyName=Other_Letter}` | | -| `\p{Other_Letter} \p{UnicodePropertyName=Other_Letter}` | | -| `\p{Other_Number} \p{UnicodePropertyName=Other_Number}` | | -| `\p{Other_Punctuation} \p{UnicodePropertyName=Other_Punctuation}` | | -| `\p{Paragraph_Separator} \p{UnicodePropertyName=Paragraph_Separator}` | | -| `\p{Private_Use}`Meaning `\p{UnicodePropertyName=Private_Use}` | | -| `\p{Punctuation} \p{UnicodePropertyName=Punctuation}` | | -| `\p{Separator} \p{UnicodePropertyName=Separator}` | | -| `\p{Space_Separator} \p{UnicodePropertyName=Space_Separator}` | | -| `\p{Spaceing_Mark} \p{UnicodePropertyName=Spacing_Mark}` | | -| `\p{Surrogate} \p{UnicodePropertyName=Surrogate}` | | -| `\p{Symbol} \p{UnicodePropertyName=Symbol}` | | -| `\p{Titlecase_Letter} \p{UnicodePropertyName=Titlecase_Letter}` | | -| `\p{Unassigned} \p{UnicodePropertyName=Unassigned}` | | -| `\p{Uppercase_Letter} \p{UnicodePropertyName=UppercaseLetter}` | | +| `\p{Final_Punctuation} \p{UnicodePropertyName=Final_Punctuation}` | | +| `\p{Format} \p{UnicodePropertyName=Format}` | | +| `\p{Initial_Punctuation} \p{UnicodePropertyName=Initial_Punctuation}` | | +| `\p{Letter} \p{UnicodePropertyName=Letter}` | | +| `\p{Letter_Number} \p{UnicodePropertyName=Line_Separator}` | | +| `\p{Lowercase_Letter} \p{UnicodePropertyName=Lowercase_Letter}` | | +| `\p{Mark} \p{UnicodePropertyName=Mark}` | | +| `\p{Math_Symbol;} \p{UnicodePropertyName=Math_Symbol}` | | +| `\p{Modifier_Letter} \p{UnicodePropertyName=Modifier_Letter}` | | +| `\p{Modifier_Symbol} \p{UnicodePropertyName=Modifier_Symbol}` | | +| `\p{Nonspacing_Mark} \p{UnicodePropertyName=Nonspacing_Mark}` | | +| `\p{Number} \p{UnicodePropertyName=Number}` | | +| `\p{Open_Punctuation} \p{UnicodePropertyName=Open_Punctuation}` | | +| `\p{Other} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Letter} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Number} \p{UnicodePropertyName=Other_Number}` | | +| `\p{Other_Punctuation} \p{UnicodePropertyName=Other_Punctuation}` | | +| `\p{Paragraph_Separator} \p{UnicodePropertyName=Paragraph_Separator}` | | +| `\p{Private_Use}`Meaning `\p{UnicodePropertyName=Private_Use}` | | +| `\p{Punctuation} \p{UnicodePropertyName=Punctuation}` | | +| `\p{Separator} \p{UnicodePropertyName=Separator}` | | +| `\p{Space_Separator} \p{UnicodePropertyName=Space_Separator}` | | +| `\p{Spaceing_Mark} \p{UnicodePropertyName=Spacing_Mark}` | | +| `\p{Surrogate} \p{UnicodePropertyName=Surrogate}` | | +| `\p{Symbol} \p{UnicodePropertyName=Symbol}` | | +| `\p{Titlecase_Letter} \p{UnicodePropertyName=Titlecase_Letter}` | | +| `\p{Unassigned} \p{UnicodePropertyName=Unassigned}` | | +| `\p{Uppercase_Letter} \p{UnicodePropertyName=UppercaseLetter}` | | ### Binaires diff --git a/files/fr/web/javascript/guide/text_formatting/index.md b/files/fr/web/javascript/guide/text_formatting/index.md index b67205a859..e1c86d6127 100644 --- a/files/fr/web/javascript/guide/text_formatting/index.md +++ b/files/fr/web/javascript/guide/text_formatting/index.md @@ -14,22 +14,22 @@ Ce chapitre présente comment travailler avec les chaînes de caractères et le ## Les chaînes de caractères -Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères. +Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères. ### Les littéraux de chaînes de caractères -Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : +Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : ```js 'machin' "truc" ``` -Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. +Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. #### Les séquences d'échappement hexadécimales -Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) : +Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) : ```js '\xA9' // "©" @@ -37,15 +37,15 @@ Le nombre situé après \x est interprété comme un nombre [hexadécimal](http #### Les séquences d'échappement Unicode -Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. +Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. ```js '\u00A9' // "©" ``` -#### L'échappement d'unités de codage Unicode +#### L'échappement d'unités de codage Unicode -Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat. +Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. @@ -58,15 +58,15 @@ Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.co ### Les objets String -L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. +L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. var s = new String('foo'); // crée un objet String console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'} typeof s; // retourne 'object' -Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères. +Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères. -Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : +Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : ```js var s1 = '2 + 2'; // crée une valeur de chaîne de caractères @@ -75,7 +75,7 @@ eval(s1); // renvoie le nombre 4 eval(s2); // renvoie la chaîne "2 + 2" ``` -Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : +Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : ```js var machaine = 'Bonjour, Monde !'; @@ -84,11 +84,11 @@ machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables machaine[0]; // cela renvoie "B" ``` -Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. +Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. -Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`. +Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`. -Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. +Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. #### Méthodes de `String` @@ -178,7 +178,7 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. </tr> <tr> <td> - {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, + {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} </td> @@ -191,7 +191,7 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. </td> <td> <p> - Retourne la chaîne tout en minuscules ou tout en majuscules, + Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement. </p> </td> @@ -219,13 +219,13 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. ### Les littéraux de modèle multi-lignes -Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes. +Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes. -Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`). +Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`). #### Multi-lignes -Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : +Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : ```js console.log('chaîne ligne de texte 1\n\ @@ -234,7 +234,7 @@ chaîne ligne de texte 2'); // chaîne ligne de texte 2" ``` -Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire : +Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire : ```js console.log(`chaîne ligne de texte 1 @@ -245,7 +245,7 @@ chaîne ligne de texte 2`); #### Expressions intégrées -Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante : +Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante : ```js var a = 5; @@ -255,7 +255,7 @@ console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.'); // pas 20." ``` -Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci : +Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci : ```js var a = 5; @@ -265,15 +265,15 @@ console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`); // pas 20." ``` -Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). +Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). ## Internationalisation -L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`. +L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`. -### Formatage date et heure +### Formatage date et heure -L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire). +L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire). ```js var msParJour = 24 * 60 * 60 * 1000; @@ -288,7 +288,7 @@ var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format; console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT ``` -### Formatage des nombres +### Formatage des nombres L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises : @@ -307,9 +307,9 @@ console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五 ### Ordonnancement -L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères. +L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères. -Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : +Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : ```js var noms = ['Hochberg', 'Hönigswald', 'Holzman']; @@ -321,7 +321,7 @@ console.log(noms.sort(annuaireAllemand.compare).join(', ')); // Affiche "Hochberg, Hönigswald, Holzman" ``` -Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). +Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). ```js var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict'); @@ -331,6 +331,6 @@ console.log(nom.sort(dictionnaireAllemand.compare).join(', ')); // Affiche "Hochberg, Holzman, Hönigswald" ``` -Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). +Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md index 95b35d1884..c353dbfc00 100644 --- a/files/fr/web/javascript/guide/using_promises/index.md +++ b/files/fr/web/javascript/guide/using_promises/index.md @@ -239,13 +239,13 @@ window.addEventListener("unhandledrejection", event => { ## Envelopper les _callbacks_ des API -Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : +Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : ```js setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); ``` -Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. +Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement : @@ -278,7 +278,7 @@ Il est possible de construire une composition séquentielle de la façon suivant Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : `Promise.resolve().then(func1).then(func2);` -On peut également accomplir cela avec une fonction de composition réutilisable : +On peut également accomplir cela avec une fonction de composition réutilisable : ```js const applyAsync = (acc, val) => acc.then(val); @@ -297,7 +297,7 @@ Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplem ```js let result; for(const f of [func1, func2, func3]) { - result = await f(result); + result = await f(result); } ``` diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md index 9dbfe909e4..09c944c67c 100644 --- a/files/fr/web/javascript/guide/working_with_objects/index.md +++ b/files/fr/web/javascript/guide/working_with_objects/index.md @@ -55,7 +55,7 @@ Les propriétés d'un objet qui n'ont pas été affectées auront la valeur [`un maVoiture.color; // undefined ``` -On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante : +On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante : ```js maVoiture["fabricant"] = "Ford"; @@ -276,7 +276,7 @@ Les objets peuvent également être créés en utilisant la méthode [`Object.cr ```js // Propriétés pour animal et encapsulation des méthodes let Animal = { - type: "Invertébrés", // Valeur par défaut value of properties + type: "Invertébrés", // Valeur par défaut value of properties afficherType : function() { // Une méthode pour afficher le type Animal console.log(this.type); } diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md index 160e5aa03e..14638e562d 100644 --- a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -211,7 +211,7 @@ Comme nous l'avons vu avant, la valeur de `__proto__` pour `uneInstance` est `fa Si `uneInstance` ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété `__proto__` de `uneInstance` (c'est-à-dire `faireUnTruc.prototype`). Si la propriété `__proto__` de `uneInstance` possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée. -Si `__proto__` de `unTruc` ne possède pas la propriété recherchée, le moteur contrôle la propriété `__proto__` de la propriété `__proto__` de `uneInstance`. Par défaut, la propriété `__proto__` de n'importe quel propriété `prototype`d'une fonction est `window.Object.prototype`. Ainsi, la propriété `__proto__` de la propriété `__proto__` de `uneInstance` (c'est-à-dire `__proto__` de `faireUnTruc.prototype` (c'est-à-dire. `Object.prototype`)) est contrôlée pour vérifier si la propriété y est présente. +Si `__proto__` de `unTruc` ne possède pas la propriété recherchée, le moteur contrôle la propriété `__proto__` de la propriété `__proto__` de `uneInstance`. Par défaut, la propriété `__proto__` de n'importe quel propriété `prototype`d'une fonction est `window.Object.prototype`. Ainsi, la propriété `__proto__` de la propriété `__proto__` de `uneInstance` (c'est-à-dire `__proto__` de `faireUnTruc.prototype` (c'est-à-dire. `Object.prototype`)) est contrôlée pour vérifier si la propriété y est présente. Si la propriété n'est pas trouvée sur la propriété `__proto__` de la propriété `__proto__` de `uneInstance`, c'est la proriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `uneInstance` qui est contrôlée. Cependant il y a un problème car la propriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `unTruc` n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre `__proto__` et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer `undefined`. @@ -611,7 +611,7 @@ console.log(inst.truc_prop)</pre JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution. -Vous avez peut-être remarqué que la fonction `A` possède une propriété spéciale intitulée `prototype`. Cette propriété spéciale fonctionne avec l'opérateur `new` Elle permet de copier la référence l'objet prototype sur la propriété interne `[[Prototype]]` de la nouvelle instance créée. Ainsi, avec `var a1 = new A()`, Le moteur JavaScript définira `a1.[[Prototype]] = A.prototype`. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype `[[Prototype]]`. Cela signifie que tout ce qui est défini sur `prototype` est effectivement partagé par l'ensemble des instances et on peut même modifier `prototype` en cours de route afin de modifier indirectement l'ensemble des instances. +Vous avez peut-être remarqué que la fonction `A` possède une propriété spéciale intitulée `prototype`. Cette propriété spéciale fonctionne avec l'opérateur `new` Elle permet de copier la référence l'objet prototype sur la propriété interne `[[Prototype]]` de la nouvelle instance créée. Ainsi, avec `var a1 = new A()`, Le moteur JavaScript définira `a1.[[Prototype]] = A.prototype`. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype `[[Prototype]]`. Cela signifie que tout ce qui est défini sur `prototype` est effectivement partagé par l'ensemble des instances et on peut même modifier `prototype` en cours de route afin de modifier indirectement l'ensemble des instances. Dans l'exemple précédent, si on avait eu `var a1 = new A(); var a2 = new A();` alors `a1.faireUnTruc` aurait fait référence à `Object.getPrototypeOf(a1).faireUntruc` qui est identique à `A.prototype.faireUnTruc`. Autrement dit `Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc`. diff --git a/files/fr/web/javascript/language_resources/index.md b/files/fr/web/javascript/language_resources/index.md index 0ef1ae3fb7..1246cf9f14 100644 --- a/files/fr/web/javascript/language_resources/index.md +++ b/files/fr/web/javascript/language_resources/index.md @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Language_Resources >, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title" >HTML</a - >, <br /><a href="https://tc39.github.io/ecma262/" + >, <br /><a href="https://tc39.github.io/ecma262/" >Brouillon de travail</a >, <a href="https://github.com/tc39/ecma262">dépôt</a> </td> diff --git a/files/fr/web/javascript/reference/classes/index.md b/files/fr/web/javascript/reference/classes/index.md index 2808bc1d39..8fbdf65b9e 100644 --- a/files/fr/web/javascript/reference/classes/index.md +++ b/files/fr/web/javascript/reference/classes/index.md @@ -19,7 +19,7 @@ En réalité, les classes sont juste des [fonctions](/fr/docs/Web/JavaScript/Ref ### Les déclarations de classes -Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »). +Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »). ```js class Rectangle { diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.md b/files/fr/web/javascript/reference/classes/private_class_fields/index.md index 45ad084074..7b6a0b1d73 100644 --- a/files/fr/web/javascript/reference/classes/private_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.md @@ -35,12 +35,12 @@ La limitation des variables statiques ne pouvant être appelées que par des mé ```js class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD - static publicStaticMethod() { - ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 - return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD - } + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } } console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42) @@ -54,12 +54,12 @@ Ceci peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class BaseClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD - static basePublicStaticMethod() { - this.#PRIVATE_STATIC_FIELD = 42 - return this.#PRIVATE_STATIC_FIELD - } + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } } class SubClass extends BaseClassWithPrivateStaticField { } @@ -75,18 +75,18 @@ console.assert(error instanceof TypeError) ### Champs d'instance privés -Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès. +Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès. L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à `#` en dehors de leur portée. ```js class ClassWithPrivateField { - #privateField + #privateField - constructor() { - this.#privateField = 42 - this.#randomField = 666 // Erreur de syntaxe - } + constructor() { + this.#privateField = 42 + this.#randomField = 666 // Erreur de syntaxe + } } const instance = new ClassWithPrivateField() @@ -103,17 +103,17 @@ Les méthodes statiques privées peuvent être des fonctions génératrices, asy ```js class ClassWithPrivateStaticMethod { - static #privateStaticMethod() { - return 42 - } + static #privateStaticMethod() { + return 42 + } - static publicStaticMethod1() { - return ClassWithPrivateStaticMethod.#privateStaticMethod(); - } + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); @@ -124,15 +124,15 @@ Cela peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class Base { - static #privateStaticMethod() { - return 42; - } - static publicStaticMethod1() { - return Base.#privateStaticMethod(); - } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } class Derived extends Base {} @@ -147,41 +147,41 @@ Les méthodes d'instance privées sont des méthodes disponibles dans les instan ```js class ClassWithPrivateMethod { - #privateMethod() { - return 'hello world' - } + #privateMethod() { + return 'hello world' + } - getPrivateMessage() { - return this.#privateMethod() - } + getPrivateMessage() { + return this.#privateMethod() + } } const instance = new ClassWithPrivateMethod() console.log(instance.getPrivateMessage()) -// expected output: "hello world" +// expected output: "hello world" ``` Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles : ```js class ClassWithPrivateAccessor { - #message - - get #decoratedMessage() { - return `✨${this.#message}✨` - } - set #decoratedMessage(msg) { - this.#message = msg - } - - constructor() { - this.#decoratedMessage = 'hello world' - console.log(this.#decoratedMessage) - } + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } } new ClassWithPrivateAccessor(); -// expected output: "✨hello world✨" +// expected output: "✨hello world✨" ``` ## Spécifications diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.md b/files/fr/web/javascript/reference/classes/public_class_fields/index.md index 8630e5e473..9cf3f20d20 100644 --- a/files/fr/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.md @@ -14,14 +14,14 @@ original_slug: Web/JavaScript/Reference/Classes/Class_fields > > Les déclarations de champs, tant publics que privés, sont [une fonctionnalité expérimentale (étape 3)](https://github.com/tc39/proposal-class-fields) proposée au [TC39](https://tc39.github.io/beta/), le comité des standards JavaScript. > -> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous. +> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous. Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype. ## Syntaxe class ClasseAvecChampDInstance { - champDInstance = 'champ d\'instance' + champDInstance = 'champ d\'instance' } class ClasseAvecChampStatique { @@ -29,9 +29,9 @@ Les champs publics, tant statiques que d'instance, sont des propriétés qui peu } class ClasseAvecMethodeDInstancePublique { - methodePublique() { - return 'hello world' - } + methodePublique() { + return 'hello world' + } } ## Exemples @@ -44,18 +44,18 @@ Les champs statiques publics sont déclarés en utilisant le mot-clé `static`. ```js class ClasseAvecChampStatique { - static champStatique = 'champ statique' + static champStatique = 'champ statique' } console.log(ClasseAvecChampStatique.champStatique) -// affichage attendu : "champ statique" +// affichage attendu : "champ statique" ``` Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampStatique { - static champStatique + static champStatique } console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique')) @@ -67,11 +67,11 @@ Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ de base' + static champStatiqueDeBase = 'champ de base' } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = 'champ de la sous-classe' + static sousChampStatique = 'champ de la sous-classe' } console.log(SousClasseAvecChampStatique.sousChampStatique) @@ -85,14 +85,14 @@ Lors de l'initialisation des champs, `this` fait référence au constructeur de ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ statique de base' - static autreChampStatiqueDeBase = this.champStatiqueDeBase + static champStatiqueDeBase = 'champ statique de base' + static autreChampStatiqueDeBase = this.champStatiqueDeBase - static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' } + static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' } } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = super.methodeStatiqueDeBase() + static sousChampStatique = super.methodeStatiqueDeBase() } console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase) @@ -122,7 +122,7 @@ Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampDInstance { - champdDInstance + champdDInstance } const instance = new ClasseAvecChampDInstance() @@ -137,7 +137,7 @@ console.log(instance.champDInstance); const PREFIXE = 'prefixe'; class ClasseAvecNomDeChampCalcule { - [`${PREFIXE}Champ`] = 'champ préfixé' + [`${PREFIXE}Champ`] = 'champ préfixé' } const instance = new ClasseAvecNomDeChampCalcule() @@ -149,13 +149,13 @@ Lors de l'initialisation des champs, `this` fait référence à l'instance en co ```js class ClasseAvecChampDInstance { - champDInstanceDeBase = 'champ de base' - autreChampDInstanceDeBase = this.champDInstanceDeBase - methodeDInstanceDeBase() { return 'affichage de la méthode de base' } + champDInstanceDeBase = 'champ de base' + autreChampDInstanceDeBase = this.champDInstanceDeBase + methodeDInstanceDeBase() { return 'affichage de la méthode de base' } } class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance { - sousChampDInstance = super.methodeDInstanceDeBase() + sousChampDInstance = super.methodeDInstanceDeBase() } const base = new ClasseAvecChampDInstance() @@ -200,7 +200,7 @@ class ClasseAvecMethodeDInstancePublique { const instance = new ClasseAvecMethodeDInstancePublique() console.log(instance.methodePublique()) -// affichage attendu : "hello world" +// affichage attendu : "hello world" ``` Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables. @@ -219,39 +219,39 @@ A l'intérieur des méthodes d'instance, `this` fait référence à l'instance e ```js class ClasseDeBase { - msg = 'hello world' - methodePubliqueDeBase() { - return this.msg - } + msg = 'hello world' + methodePubliqueDeBase() { + return this.msg + } } class SousClasse extends ClasseDeBase { - sousMethodePublique() { - return super.methodePubliqueDeBase() - } + sousMethodePublique() { + return super.methodePubliqueDeBase() + } } const instance = new SousClasse() console.log(instance.sousMethodePublique()) -// affichage attendu : "hello world" +// affichage attendu : "hello world" ``` Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe [get](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get) et [set](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set) pour déclarer un accesseur ou un mutateur publique d'une instance. ```js class ClasseAvecGetSet { - #msg = 'hello world' - get msg() { - return this.#msg - } - set msg(x) { - this.#msg = `hello ${x}` - } + #msg = 'hello world' + get msg() { + return this.#msg + } + set msg(x) { + this.#msg = `hello ${x}` + } } const instance = new ClasseAvecGetSet(); console.log(instance.msg); -// affichage attendu : "hello world" +// affichage attendu : "hello world" instance.msg = 'gâteau'; console.log(instance.msg); diff --git a/files/fr/web/javascript/reference/classes/static/index.md b/files/fr/web/javascript/reference/classes/static/index.md index f08b2b5a94..7637ced784 100644 --- a/files/fr/web/javascript/reference/classes/static/index.md +++ b/files/fr/web/javascript/reference/classes/static/index.md @@ -77,7 +77,7 @@ StaticMethodCall.anotherStaticMethod(); ### Depuis les constructeurs de classes et les autres méthodes -Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. +Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. ```js class StaticMethodCall{ @@ -89,7 +89,7 @@ class StaticMethodCall{ // 'appel de la méthode statique' } - static staticMethod(){ + static staticMethod(){ return 'appel de la méthode statique.'; } } @@ -100,7 +100,7 @@ class StaticMethodCall{ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md index f50090e6ec..a31b1b95c4 100644 --- a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md +++ b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md @@ -40,7 +40,7 @@ var encouragement = function(score) { // SyntaxError: return not in function ``` -À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait : +À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait : ```js example-good var encouragement = function(score) { diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md index 351754cba4..925b83954a 100644 --- a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md +++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md @@ -23,7 +23,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_ ## Quel est le problème ? -Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec `let` ou `const` et qui est utilisée avant son initialisation. +Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec `let` ou `const` et qui est utilisée avant son initialisation. ## Exemple diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md index 8849cda16d..692afd4743 100644 --- a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md +++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md @@ -22,7 +22,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_ ## Quel est le problème ? -La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà. +La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.md b/files/fr/web/javascript/reference/errors/cant_delete/index.md index c2e807eecf..0565d5a0e5 100644 --- a/files/fr/web/javascript/reference/errors/cant_delete/index.md +++ b/files/fr/web/javascript/reference/errors/cant_delete/index.md @@ -29,7 +29,7 @@ Cette erreur ne se produit qu'en [mode strict](/fr/docs/Web/JavaScript/Reference ## Exemples -Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à {{jsxref("Object.freeze()")}}. +Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à {{jsxref("Object.freeze()")}}. ```js example-bad "use strict"; diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md index d9aba3fe1e..894d070154 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md @@ -35,11 +35,11 @@ Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{j "use strict"; function myFunc() { - if (myFunc.caller == null) { - return 'La fonction a été appelée depuis la portée globale !'; - } else { - return 'L\'appelant est ' + myFunc.caller; - } + if (myFunc.caller == null) { + return 'La fonction a été appelée depuis la portée globale !'; + } else { + return 'L\'appelant est ' + myFunc.caller; + } } myFunc(); diff --git a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md index 362fb57677..8eee8c5490 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md @@ -39,7 +39,7 @@ console.log(date); ### Utiliser une syntaxe standard grâce à l'API ECMAScript Intl -Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de Safari10). +Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de Safari10). Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}. diff --git a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md index 7d1e4dc118..0ec946b4c2 100644 --- a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md +++ b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md @@ -19,7 +19,7 @@ Avertissement. ## Quel est le problème ? -L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche. +L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.md b/files/fr/web/javascript/reference/errors/illegal_character/index.md index d1da414713..0a96f45df1 100644 --- a/files/fr/web/javascript/reference/errors/illegal_character/index.md +++ b/files/fr/web/javascript/reference/errors/illegal_character/index.md @@ -74,14 +74,14 @@ var couleurs = ['#000', '#333', '#666']; Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner. ```js example-bad -var toto = 'truc'; +var toto = 'truc'; // SyntaxError: illegal character ``` Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un [espace sans chasse (ZWSP) (U+200B)](https://fr.wikipedia.org/wiki/Espace_sans_chasse). ```js -var toto = 'truc';<200b> +var toto = 'truc';<200b> ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md index 800de07226..ec4a1251f8 100644 --- a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md +++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md @@ -22,7 +22,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/is_not_iterable ## Quel est le problème ? -La valeur passée comme opérande droit de [`for…of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas [un objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration). Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). +La valeur passée comme opérande droit de [`for…of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas [un objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration). Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). ## Exemples diff --git a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md index bc5d9e5ba0..c163302293 100644 --- a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md +++ b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md @@ -27,7 +27,7 @@ C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s' ## OK mais pourquoi cette formulation étrange ? -En effet, "Formal parameter" est une manière étrange de dire « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe. +En effet, "Formal parameter" est une manière étrange de dire « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe. ## Examples diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md index e37713d3bc..3bcbe79228 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md @@ -23,18 +23,18 @@ original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argume -Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple . +Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple . ## Exemple -Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme l'argument de la fonction `log`. +Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme l'argument de la fonction `log`. ```js example-bad console.log("PI: " Math.PI); // SyntaxError: missing ) after argument list ``` -La fonction `log` peut être corrigée en ajoutant un opérateur "+". +La fonction `log` peut être corrigée en ajoutant un opérateur "+". ```js example-good console.log("PI: " + Math.PI); diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md index f1afdee5d9..f7f480d8b0 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md @@ -21,7 +21,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condit ## Quel est le problème ? -Il y a une erreur pour la condition écrite dans l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction `if` permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé `if` : +Il y a une erreur pour la condition écrite dans l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction `if` permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé `if` : ```js if (condition) { diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md index 720a30d67c..ab0bb67b3d 100644 --- a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md +++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md @@ -30,7 +30,7 @@ La plupart du temps, les propriétés d'un objet créé avec [un littéral de ta ## Exemples -### Propriétés non-configurables créées avec `Object.defineProperty` +### Propriétés non-configurables créées avec `Object.defineProperty` Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire : diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.md b/files/fr/web/javascript/reference/errors/not_a_function/index.md index e6b948eebe..6f292abca3 100644 --- a/files/fr/web/javascript/reference/errors/not_a_function/index.md +++ b/files/fr/web/javascript/reference/errors/not_a_function/index.md @@ -29,7 +29,7 @@ Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonct - Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument : - - {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}} + - {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}} - Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées : diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.md b/files/fr/web/javascript/reference/errors/property_access_denied/index.md index 2e8b3fc24d..f420714401 100644 --- a/files/fr/web/javascript/reference/errors/property_access_denied/index.md +++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.md @@ -28,16 +28,16 @@ Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'av ```html <!DOCTYPE html> <html> - <head> - <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> - <script> - onload = function() { + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { console.log(frames[0].document); // Error: Permission denied to access property "document" } - </script> - </head> - <body></body> + </script> + </head> + <body></body> </html> ``` diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md index aae211ac07..980eab24bb 100644 --- a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md +++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md @@ -24,9 +24,9 @@ original_slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_in En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau : - {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que -- {{jsxref("TypedArray.prototype.reduce()")}}, {{jsxref("TypedArray.prototype.reduceRight()")}}). +- {{jsxref("TypedArray.prototype.reduce()")}}, {{jsxref("TypedArray.prototype.reduceRight()")}}). -Ces fonctions utilisent un argument optionnel `valeurInitiale` (qui sera utilisée comme premier argument pour le premier appel du `callback`). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie. +Ces fonctions utilisent un argument optionnel `valeurInitiale` (qui sera utilisée comme premier argument pour le premier appel du `callback`). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/undefined_prop/index.md b/files/fr/web/javascript/reference/errors/undefined_prop/index.md index 3577d40eb6..992e0b7e1c 100644 --- a/files/fr/web/javascript/reference/errors/undefined_prop/index.md +++ b/files/fr/web/javascript/reference/errors/undefined_prop/index.md @@ -38,7 +38,7 @@ toto.truc; // ReferenceError: reference to undefined property "bar" ### Exemples valides -Pour éviter cette erreur, il faut que `truc` soit une variable « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}). +Pour éviter cette erreur, il faut que `truc` soit une variable « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}). ```js example-good "use strict"; diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md index e6f4715714..f41f43c5ab 100644 --- a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md @@ -41,8 +41,8 @@ f('w', 'y', 'k', 'o', 'p'); | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. | | {{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.md b/files/fr/web/javascript/reference/functions/arguments/callee/index.md index 3f9e24ec08..bc6a3f6333 100644 --- a/files/fr/web/javascript/reference/functions/arguments/callee/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.md @@ -53,7 +53,7 @@ ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta `arguments.call }); ``` -Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` : +Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` : ```js var global = this; @@ -133,9 +133,9 @@ jean(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/index.md b/files/fr/web/javascript/reference/functions/arguments/index.md index 84b1939b72..61ba3d40ed 100644 --- a/files/fr/web/javascript/reference/functions/arguments/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/index.md @@ -30,7 +30,7 @@ L'objet **`arguments`** est un objet, **semblable** à un tableau, correspondant L'objet `arguments` est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). -Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit : +Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit : ```js arguments[0] @@ -38,7 +38,7 @@ arguments[1] arguments[2] ``` -Les arguments peuvent aussi être modifiés : +Les arguments peuvent aussi être modifiés : ```js arguments[1] = 'nouvelle valeur'; @@ -46,7 +46,7 @@ arguments[1] = 'nouvelle valeur'; ### Type de l'objet `arguments` et liens avec `Array` -L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` : +L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` : ```js console.log(typeof arguments); // 'object' @@ -73,7 +73,7 @@ var args = [...arguments]; L'objet `arguments` est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet `arguments` en dehors de la déclaration d'une fonction renvoie une erreur. -Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.) +Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.) ### Utiliser `typeof` sur `arguments` @@ -104,7 +104,7 @@ console.log(typeof arguments[0]); // renvoie le type du premier argument ### Définir une fonction de concaténation d'un nombre variable de chaînes -Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit : +Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit : ```js function myConcat(separateur) { @@ -113,7 +113,7 @@ function myConcat(separateur) { } ``` -Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste. +Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste. ```js // renvoie "rouge, orange, bleu" @@ -125,7 +125,7 @@ myConcat(" ; ", "elephant", "giraffe", "lion", "guépard"); ### Définir une fonction de création de listes HTML -Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit : +Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit : ```js function liste(type) { @@ -138,12 +138,12 @@ function liste(type) { } ``` -Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple : +Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple : ```js var listeHTML = liste("u", "Un", "Deux", "Trois"); -/* listeHTML vaut : +/* listeHTML vaut : "<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>" @@ -222,9 +222,9 @@ func(3, 4); // 3 4 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.md b/files/fr/web/javascript/reference/functions/arguments/length/index.md index 7deb32f457..ec6a8df193 100644 --- a/files/fr/web/javascript/reference/functions/arguments/length/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/length/index.md @@ -51,9 +51,9 @@ résultat = somme(103, 104, 105); // renvoie 312 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.md b/files/fr/web/javascript/reference/functions/arrow_functions/index.md index c40336f008..e2cf388354 100644 --- a/files/fr/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.md @@ -55,13 +55,13 @@ Une **expression de fonction fléchée** (_arrow function_ en anglais) permet d ## Description -Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}). +Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}). > **Note :** Voir aussi l’article sur les fonctions fléchées présent sur <https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees> (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). ### Syntaxe plus courte -Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple : +Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple : ```js var a = [ @@ -106,7 +106,7 @@ function Personne () { var p = new Personne(); ``` -Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable : +Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable : ```js function Personne () { @@ -180,7 +180,7 @@ console.log(ajouter.addViaCall(1)); #### Pas de liaison pour `arguments` -Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante : +Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante : ```js var arguments = [1, 2, 3]; @@ -197,7 +197,7 @@ function toto () { toto(3); // 5 ``` -Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative : +Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative : ```js function toto () { @@ -231,7 +231,7 @@ objet.c(); #### Utiliser `prototype` -Les fonctions fléchées ne possèdent pas de prototype : +Les fonctions fléchées ne possèdent pas de prototype : ```js var Toto = () => {}; @@ -266,7 +266,7 @@ var fonction = (x, y) => { return x + y; } ## Renvoyer des littéraux objets -Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux : +Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux : ```js // fonction() renverra undefined ! @@ -276,7 +276,7 @@ var fonction = () => { toto: 1 }; var fonction2 = () => { toto: function () {} }; ``` -En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet : +En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet : ```js var fonction = () => ({ toto: 1 }); @@ -294,7 +294,7 @@ var func = () ## Ordre syntaxique -La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique : +La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique : ```js let fonctionRappel; @@ -374,4 +374,4 @@ setTimeout( () => { ## Voir aussi -- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). +- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.md b/files/fr/web/javascript/reference/functions/default_parameters/index.md index 92a5187cf6..cdbd9e84d8 100644 --- a/files/fr/web/javascript/reference/functions/default_parameters/index.md +++ b/files/fr/web/javascript/reference/functions/default_parameters/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_argume --- {{jsSidebar("Functions")}} -Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée. +Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée. {{EmbedInteractiveExample("pages/js/functions-default.html")}} diff --git a/files/fr/web/javascript/reference/functions/index.md b/files/fr/web/javascript/reference/functions/index.md index 5e00f3541e..bd7590fce8 100644 --- a/files/fr/web/javascript/reference/functions/index.md +++ b/files/fr/web/javascript/reference/functions/index.md @@ -99,7 +99,7 @@ var maFonction = function() { } ``` -Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** : +Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** : ```js var maFonction = function fonctionNommée(){ @@ -126,7 +126,7 @@ Les _IIFE_ sont des expressions de fonction appelées dès que la fonction est d Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) : function* nom([param[, param[, ... param]]]) { - instructions + instructions } - `nom` @@ -141,7 +141,7 @@ Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page s Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) : function* [nom]([param[, param[, ... param]]]) { - instructions + instructions } - `nom` @@ -162,7 +162,7 @@ Une expression de fonction fléchée possède une syntaxe plus courte et est li param => expression - `param` - - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`. S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple : `toto => 1`). + - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`. S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple : `toto => 1`). - `instructions` ou `expression` - : S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction. @@ -358,7 +358,7 @@ Cela n'est pas différent du stockage de références avec d'autres objets, mais ### Imbrication multiple de fonctions -On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée » (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.) +On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée » (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.) On peut l'observer avec l'exemple suivant : @@ -379,7 +379,7 @@ Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela 1. `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A` 2. `C` est une fermeture qui contient `B` -3. Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de* `B` et `A` dans cet ordre. +3. Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de* `B` et `A` dans cet ordre. La réciproque n'est pas vraie. `A` ne peut avoir accès à `C`, parce que `A` ne peut accéder ni aux variables ni aux arguments de `B`, or `C` est une variable de `B. C` est donc privé et seulement pour `B`. @@ -398,7 +398,7 @@ function externe() { resultat = externe()(20); // renvoie 20 et non pas 10 ``` -Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x` de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le `x` de la fonction interne l'emporte sur le `x` de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`). +Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x` de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le `x` de la fonction interne l'emporte sur le `x` de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`). ## Définition des méthodes @@ -418,7 +418,7 @@ Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus c ```js var obj = { toto() {}, - truc() {} + truc() {} }; ``` diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.md b/files/fr/web/javascript/reference/functions/method_definitions/index.md index a0e36dc8e0..2ee809f6eb 100644 --- a/files/fr/web/javascript/reference/functions/method_definitions/index.md +++ b/files/fr/web/javascript/reference/functions/method_definitions/index.md @@ -60,7 +60,7 @@ var obj = { toto() { /* du code */ }, - truc() { + truc() { /* du code */ } }; @@ -192,7 +192,7 @@ console.log(bar.toto2()); // 2 | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | | {{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2016')}} | Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec `new`. | -| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md index c2ae826291..3614dafe3f 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md @@ -56,7 +56,7 @@ console.log(eArr.next().value); // p | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md index 1a4970e0f7..290c2cbd51 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md @@ -34,7 +34,7 @@ La propriété renvoie le constructeur par défaut, dans le cas des objets `Arra Array[Symbol.species]; // function Array() ``` -Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` : +Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` : ```js class MonArray extends Array { @@ -49,7 +49,7 @@ class MonArray extends Array { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md index 0b5f7a4aee..196255fa0a 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md @@ -20,7 +20,7 @@ La propriété symbol **`@@unscopable`** contient les noms des propriétés qui ## Description -Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`. +Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`. Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `unscopables` sur des objets personnalisés. @@ -28,7 +28,7 @@ Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `uns ## Exemples -Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. +Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. ```js var keys = []; @@ -47,7 +47,7 @@ Object.keys(Array.prototype[Symbol.unscopables]); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md index 7bdac1b5b6..8b3ed669c0 100644 --- a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin --- {{JSRef}} -La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille. +La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille. {{EmbedInteractiveExample("pages/js/array-copywithin.html")}} @@ -35,7 +35,7 @@ La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) - `début` {{optional_inline}} - : Indice de début de la séquence a copier. Si la valeur est négative, `début` sera compté à partir de la fin du tableau. Si `début` est omis, `copyWithin` copiera à partir du début du tableau (par défaut 0). - `fin` {{optional_inline}} - - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`). + - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`). ### Valeur de retour @@ -43,11 +43,11 @@ Le tableau modifié par la méthode. ## Description -La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent. +La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent. -La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}. +La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}. -De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire. +De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire. ## Exemples @@ -157,8 +157,8 @@ if (!Array.prototype.copyWithin) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.md b/files/fr/web/javascript/reference/global_objects/array/entries/index.md index 9bfa9f7ca7..f9f3ad9cd6 100644 --- a/files/fr/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/entries --- {{JSRef}} -La méthode **`entries()`** renvoie un nouvel objet de type **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau. +La méthode **`entries()`** renvoie un nouvel objet de type **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau. {{EmbedInteractiveExample("pages/js/array-entries.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.md b/files/fr/web/javascript/reference/global_objects/array/every/index.md index 030fb9e115..d033d47630 100644 --- a/files/fr/web/javascript/reference/global_objects/array/every/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.md @@ -159,8 +159,8 @@ if (!Array.prototype.every) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.md b/files/fr/web/javascript/reference/global_objects/array/fill/index.md index 7b9928f46d..7de1315573 100644 --- a/files/fr/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.md @@ -121,7 +121,7 @@ if (!Array.prototype.fill) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.md b/files/fr/web/javascript/reference/global_objects/array/filter/index.md index 33a4181ab3..5b4e5738cc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/filter --- {{JSRef}} -La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`. +La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`. {{EmbedInteractiveExample("pages/js/array-filter.html")}} @@ -39,7 +39,7 @@ La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous Cette fonction renvoie `true` — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et `false` dans le cas contraire. - `thisArg` {{optional_inline}} - - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée. + - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée. ### Valeur de retour @@ -47,7 +47,7 @@ Un nouveau tableau contenant les éléments qui respectent la condition du filtr ## Description -`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau. +`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau. La fonction `callback` est appelée avec trois arguments : @@ -55,7 +55,7 @@ La fonction `callback` est appelée avec trois arguments : 2. l'index de l'élément courant, 3. l'objet `Array` parcouru. -Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). Noter que `filter()` ne modifie pas le tableau d'origine. @@ -95,7 +95,7 @@ var arr = [ var elementsInvalides = 0; function filtrerParID(obj) { - // Si c'est un nombre + // Si c'est un nombre if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) { return true; } else { @@ -139,7 +139,7 @@ L'exemple suivant utilise [les fonctions fléchées](/fr/docs/Web/JavaScript/Ref const fruits = ['pomme', 'banane', 'raisin', 'mangue']; const filtreTexte = (arr, requete) => { - return arr.filter(el => el.toLowerCase().indexOf(requete.toLowerCase()) !== -1); + return arr.filter(el => el.toLowerCase().indexOf(requete.toLowerCase()) !== -1); } console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue']; @@ -192,8 +192,8 @@ if (!Array.prototype.filter){ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES2015')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.md b/files/fr/web/javascript/reference/global_objects/array/find/index.md index c66c0ac9db..ebefb4e204 100644 --- a/files/fr/web/javascript/reference/global_objects/array/find/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/find --- {{JSRef}} -La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée. +La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée. {{EmbedInteractiveExample("pages/js/array-find.html")}} @@ -28,7 +28,7 @@ Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie - `callback` - - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : + - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : - `element` - : L'élément actuellement traité dans le tableau. @@ -48,7 +48,7 @@ La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref(" La méthode `find` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en `true`). Si un élément est trouvé, `find` retourne immédiatement la valeur de l'élément. Autrement, `find` retourne `undefined`. La méthode `callback` est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur. -La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé. +La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé. Si le paramètre `thisArg` est fourni à `find`, il sera utilisé comme le `this` pour chaque exécution de la fonction `callback`. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé. diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md index 5a4a20328c..5a3bf653bc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md @@ -149,7 +149,7 @@ S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.md b/files/fr/web/javascript/reference/global_objects/array/flat/index.md index e9ee2df63b..3499e1cebc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/flat/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.md @@ -72,7 +72,7 @@ arr.reduce((acc, val) => acc.concat(val), []); const flat = arr => [].concat(...arr); ``` -### `reduce` + `concat` + `isArray` + récursivité +### `reduce` + `concat` + `isArray` + récursivité ```js var arr = [1, 2, [3, 4, [5, 6]]]; diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md index 14d8d2e1f4..fd2cbce00b 100644 --- a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md @@ -172,8 +172,8 @@ if (!Array.prototype.indexOf) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md index c4b10b3082..425e280eb0 100644 --- a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md @@ -83,8 +83,8 @@ if(!Array.isArray) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.md b/files/fr/web/javascript/reference/global_objects/array/join/index.md index 860e358953..fe545d6368 100644 --- a/files/fr/web/javascript/reference/global_objects/array/join/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.md @@ -65,9 +65,9 @@ f(1, 'a', true); // '1,a,true' | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.md b/files/fr/web/javascript/reference/global_objects/array/keys/index.md index 51483bec61..84f07d3c14 100644 --- a/files/fr/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.md @@ -55,7 +55,7 @@ console.log(clésDenses); // [0, 1, 2] | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.md b/files/fr/web/javascript/reference/global_objects/array/length/index.md index caa912f99a..e3ec3eb017 100644 --- a/files/fr/web/javascript/reference/global_objects/array/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.md @@ -31,7 +31,7 @@ tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 console.log(tableauB.length); // 4294967295 ``` -Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques). +Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques). ```js const arr = [1, 2, 3]; diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.md b/files/fr/web/javascript/reference/global_objects/array/map/index.md index b5a56e9db7..b43d8a8022 100644 --- a/files/fr/web/javascript/reference/global_objects/array/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.md @@ -48,7 +48,7 @@ Lorsqu'on utilise `map`, la fonction `callback` fournie en argument est exécut `callback` est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru. -> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`. +> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`. Si le paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` par la fonction `callback` lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir `this`. La valeur `this` finalement prise en compte par la fonction `callback` est définie [selon les règles usuelles qui déterminent la valeur `this` observée par une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.md b/files/fr/web/javascript/reference/global_objects/array/of/index.md index cbc2b0c156..6efae79cae 100644 --- a/files/fr/web/javascript/reference/global_objects/array/of/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/of La methode **`Array.of()`** permet de créer une nouvelle instance d'objet `Array` à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type. -La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)). +La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)). ```js Array.of(7); // [7] diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.md b/files/fr/web/javascript/reference/global_objects/array/pop/index.md index 7b9862f6fb..b81de016e6 100644 --- a/files/fr/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.md @@ -66,9 +66,9 @@ console.log(popped); // 'sturgeon' | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.md b/files/fr/web/javascript/reference/global_objects/array/push/index.md index 0472582660..8fcbf9bd80 100644 --- a/files/fr/web/javascript/reference/global_objects/array/push/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/push --- {{JSRef}} -La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau. +La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau. {{EmbedInteractiveExample("pages/js/array-push.html")}} @@ -31,11 +31,11 @@ La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'o ## Description -La méthode `push` permet d'ajouter des valeurs à un tableau. +La méthode `push` permet d'ajouter des valeurs à un tableau. `push` est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux. -La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée. +La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée. Bien que `push` soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet `arguments` car ils sont immuables. @@ -43,7 +43,7 @@ Bien que `push` soit une méthode générique, elle ne peut pas être utilisée ### Ajouter des éléments à un tableau -Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau. +Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau. ```js var sports = ["plongée", "baseball"]; diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md index 7c9ea377a9..fbf47eb2ac 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md @@ -47,13 +47,13 @@ La valeur obtenue grâce à la fonction de réduction. ## Description -`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction `callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru. +`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction `callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru. L'usage de `reduceRight` avec définition d'un `callback` devrait ressembler à ceci : ```js array.reduceRight(function(accumulator, valeurCourante, index, array) { - // ... + // ... }); ``` diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md index 034a9a73e9..cf1d7a9630 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse --- {{JSRef}} -La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite. +La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite. {{EmbedInteractiveExample("pages/js/array-reverse.html")}} @@ -62,9 +62,9 @@ console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3} | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.md b/files/fr/web/javascript/reference/global_objects/array/shift/index.md index f34d0d73da..05d729f7a4 100644 --- a/files/fr/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift --- {{JSRef}} -La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau. +La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau. {{EmbedInteractiveExample("pages/js/array-shift.html")}} @@ -26,11 +26,11 @@ L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide ## Description -La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné. +La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné. Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. -Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie. +Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie. > **Note :** La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier). @@ -38,7 +38,7 @@ Cette méthode n'est pas exploitable pour les objets dont la propriété `lengt ### Supprimer un élément d'un tableau -Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé : +Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé : ```js var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"]; diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.md b/files/fr/web/javascript/reference/global_objects/array/slice/index.md index 35f56b4c80..a08aec5370 100644 --- a/files/fr/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.md @@ -39,7 +39,7 @@ Un nouveau tableau contenant les éléments extraits. ## Description -`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante : +`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante : - Pour les références à des objets (et non les objets eux-mêmes), `slice()` copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau. - Pour les chaines de caractères, les nombres et les booléens, `slice()` copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur _type primitif_, pas des _objets_ {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple [différences entre objet String et type primitif pour les chaines de caractères](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères)). @@ -64,7 +64,7 @@ Dans l'exemple qui suit, `slice()` crée un nouveau tableau, `nouvelleVoiture`, ```js // Avec slice, crée nouvelleVoiture depuis maVoiture -var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } }; +var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } }; var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"]; var nouvelleVoiture = maVoiture.slice(0, 2); @@ -84,7 +84,7 @@ console.log("maVoiture[0].couleur = " + maVoiture[0].couleur); console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur); ``` -Ce script affichera : +Ce script affichera : ```js maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2, diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.md b/files/fr/web/javascript/reference/global_objects/array/some/index.md index 7f30c4151c..3b67598f04 100644 --- a/files/fr/web/javascript/reference/global_objects/array/some/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.md @@ -38,7 +38,7 @@ La méthode **`some()`** teste si au moins un élément du tableau passe le test - : Le tableau sur lequel on a appelé la méthode `some`. - `objetThis` {{optional_inline}} - - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`. + - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`. ### Valeur de retour @@ -46,15 +46,15 @@ La méthode **`some()`** teste si au moins un élément du tableau passe le test ## Description -La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée. +La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée. -La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru. +La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru. -Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). La méthode `some()` ne modifie pas le tableau sur lequel elle est appelée. -La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités. +La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.md b/files/fr/web/javascript/reference/global_objects/array/sort/index.md index 75fe8a8ce3..357cee51b8 100644 --- a/files/fr/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.md @@ -38,14 +38,14 @@ Si le paramètre `fonctionComparaison` n'est pas fourni, les éléments qui ne v > **Note :** En UTF-16, les caractères Unicode situés après `\uFFFF` sont encodés avec deux unités de code _surrogates_ sur l'intervalle `\uD800`-`\uDFFF`. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire _surrogate_ `\uD655 \uDE55` sera trié avant le caractère `\uFF3A`. -Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors : +Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors : - Si `fonctionComparaison(a, b)` est inférieur à 0, on trie `a` avec un indice inférieur à `b` (`a` sera classé avant `b`) -- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci. +- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci. - Si `fonctionComparaison(a, b)` est supérieur à 0, on trie `b` avec un indice inférieur à `a`. - `fonctionComparaison(a, b)` doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini. -Une fonction de comparaison aura donc généralement la forme suivante : +Une fonction de comparaison aura donc généralement la forme suivante : ```js function compare(a, b) { @@ -103,7 +103,7 @@ items.sort(function (a, b) { ### Différences d'implémentation -Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri. +Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri. Le tri est stable dans [SpiderMonkey](/fr/docs/SpiderMonkey) et tous les navigateurs basés sur Mozilla à partir de [Gecko](/fr/docs/Gecko) 1.9 (voir le {{ Bug(224128) }}). @@ -111,7 +111,7 @@ Le comportement de la méthode `sort()` a changé entre JavaScript 1.1 et JavaSc En JavaScript 1.1, sur certaines plateformes, la méthode `sort` ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2. -En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script : +En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script : ```js var a = []; @@ -132,12 +132,12 @@ console.log("\n"); writeArray(a); ``` -En JavaScript 1.1, cette fonction affichait : +En JavaScript 1.1, cette fonction affichait : araignée, null, null, null, null, zèbre araignée, null, null, null, null, zèbre -En JavaScript 1.2, elle affichera : +En JavaScript 1.2, elle affichera : araignée, undefined, undefined, undefined, undefined, zèbre araignée, zèbre, undefined, undefined, undefined, undefined @@ -158,38 +158,38 @@ function compareNombres(a, b) { return a - b; } -console.log("Chaînes : " + stringArray.join() +"\n"); -console.log("Triées : " + stringArray.sort() +"\n\n"); +console.log("Chaînes : " + stringArray.join() +"\n"); +console.log("Triées : " + stringArray.sort() +"\n\n"); -console.log("Nombres : " + numberArray.join() +"\n"); -console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n"); -console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n"); +console.log("Nombres : " + numberArray.join() +"\n"); +console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n"); +console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n"); -console.log("Chaînes numériques : " + numericStringArray.join() +"\n"); -console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n"); -console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n"); +console.log("Chaînes numériques : " + numericStringArray.join() +"\n"); +console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n"); +console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n"); -console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n"); -console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n"); -console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n"); +console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n"); +console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n"); +console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n"); ``` Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques. - Chaînes : Bosse,Bleue,Béluga - Triées : Bleue,Bosse,Béluga + Chaînes : Bosse,Bleue,Béluga + Triées : Bleue,Bosse,Béluga - Nombres : 40,1,5,200 - Triés sans fonction de comparaison : 1,200,40,5 - Triés avec compareNombres : 1,5,40,200 + Nombres : 40,1,5,200 + Triés sans fonction de comparaison : 1,200,40,5 + Triés avec compareNombres : 1,5,40,200 - Chaînes numériques : 80,9,700 - Triées sans fonction de comparaison : 700,80,9 - Triées avec compareNombres : 9,80,700 + Chaînes numériques : 80,9,700 + Triées sans fonction de comparaison : 700,80,9 + Triées avec compareNombres : 9,80,700 - Nombres et chaînes numériques : 80,9,700,40,1,5,200 - Triés sans fonction de comparaison : 1,200,40,5,700,80,9 - Triés avec compareNombres : 1,5,9,40,80,200,700 + Nombres et chaînes numériques : 80,9,700,40,1,5,200 + Triés sans fonction de comparaison : 1,200,40,5,700,80,9 + Triés avec compareNombres : 1,5,9,40,80,200,700 ### Trier des caractères non-ASCII diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.md b/files/fr/web/javascript/reference/global_objects/array/splice/index.md index 8ce0f4aaf2..febbe8bc53 100644 --- a/files/fr/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.md @@ -23,7 +23,7 @@ La méthode **`splice()`** modifie le contenu d'un tableau en retirant des élé ### Paramètres - `début` - - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`. + - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`. - `nbASupprimer` - : Un entier indiquant le nombre d'anciens éléments à remplacer. Si ce paramètre est absent ou si sa valeur est supérieure ou égale à `array.length - début`, alors les éléments entre `début` et la fin du tableau seront supprimés. Si `nbASupprimer` vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément. diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md index def1a9901d..3ec8dc4deb 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md @@ -25,9 +25,9 @@ Une chaîne de caractères qui représente le code source du tableau. ## Description -La méthode `toSource()` renvoie les valeurs suivantes : +La méthode `toSource()` renvoie les valeurs suivantes : -- Pour l'objet {{jsxref("Array")}} natif, `toSource()` renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : +- Pour l'objet {{jsxref("Array")}} natif, `toSource()` renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : ```js function Array() { @@ -43,7 +43,7 @@ Cette méthode est habituellement appelée en interne par le moteur JavaScript e ### Examiner le code source d'un tableau -Pour examiner le code source d'un tableau : +Pour examiner le code source d'un tableau : ```js var alpha = new Array("a", "b", "c"); diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md index a14b6b7b8d..c35f7ac05b 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md @@ -39,9 +39,9 @@ JavaScript appelle la méthode `toString()` automatiquement lorsqu'un tableau do | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.md b/files/fr/web/javascript/reference/global_objects/array/values/index.md index d7f591029d..803d26fe03 100644 --- a/files/fr/web/javascript/reference/global_objects/array/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.md @@ -68,7 +68,7 @@ console.log(eArr.next().value); // p | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md index 7a9b7c3e7e..8d92fd6eb9 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md @@ -45,7 +45,7 @@ class MonArrayBuffer extends ArrayBuffer { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md index 5bbc57d6a2..f54c6596ef 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md @@ -37,7 +37,7 @@ buffer.byteLength; // 8 | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md index d5224cac4c..ccf8cd7fe4 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md @@ -54,7 +54,7 @@ ArrayBuffer.isView(dv); // true | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------ | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015 | | {{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ES2015')}} | Définition initiale dans un standard ECMA. | -| {{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md index 9eeed19b9c..63c3b3de65 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md @@ -33,7 +33,7 @@ Un nouvel objet `ArrayBuffer`. ## Description -La méthode `slice` copie les octets contenus jusqu'au (au sens exclusif) paramètre `fin`. Si le paramètre `début` ou `fin` est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau. +La méthode `slice` copie les octets contenus jusqu'au (au sens exclusif) paramètre `fin`. Si le paramètre `début` ou `fin` est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau. ## Exemples @@ -50,7 +50,7 @@ var buf2 = buf1.slice(0) | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans EMCAScript 6. | | {{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md index 1c45132d22..8cf9fe7f46 100644 --- a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md +++ b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md @@ -36,7 +36,7 @@ Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones"," Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés. -> **Note :** Les fonctions asynchrones créées avec le constructeur `AsyncFunction` ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle `AsyncFunction` a été appelé. On aurait donc un comportement différent si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone. +> **Note :** Les fonctions asynchrones créées avec le constructeur `AsyncFunction` ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle `AsyncFunction` a été appelé. On aurait donc un comportement différent si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone. Si on appelle `AsyncFunction` comme une fonction (c'est-à-dire sans `new`), cela aura le même effet que s'il est appelé comme un constructeur. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/add/index.md b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md index cc64ee49f3..32e5d93796 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/and/index.md b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md index 8341952afd..4a4692676f 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/and/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levée -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md index 566e1b5351..3a9815d4a0 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md @@ -37,7 +37,7 @@ L'ancienne valeur présente à `typedArray[index]`. ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md index 17471c7fb0..fbcd093a7b 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/index.md b/files/fr/web/javascript/reference/global_objects/atomics/index.md index 7c73460000..ce1ad00639 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/index.md @@ -59,7 +59,7 @@ Le méthodes `wait`() et `notify()` sont basées sur les _futex_ Linux (selon le | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs @@ -71,7 +71,7 @@ Le méthodes `wait`() et `notify()` sont basées sur les _futex_ Linux (selon le Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont : - Les méthodes `Atomics.futexWakeOrRequeue()` et `Atomics.fence()` sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}). -- Les méthodes {{jsxref("Atomics.wait()")}} et {{jsxref("Atomics.wake()")}} qui étaient nommées `Atomics.futexWait()` ete `Atomics.futexWake()` (cf. {{bug(1260910)}}). Les anciens noms seront définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). `Atomics.wake()` a été renommé en `Atomics.notify()` à partir de la version 63. +- Les méthodes {{jsxref("Atomics.wait()")}} et {{jsxref("Atomics.wake()")}} qui étaient nommées `Atomics.futexWait()` ete `Atomics.futexWake()` (cf. {{bug(1260910)}}). Les anciens noms seront définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). `Atomics.wake()` a été renommé en `Atomics.notify()` à partir de la version 63. - Les propriétés `Atomics.OK`, `Atomics.TIMEDOUT`, `Atomics.NOTEQUAL` ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères `"ok"`, `"timed-out"` ou `"not-equal"` (cf. {{bug(1260835)}}). - Le paramètre `count` de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais `+Infinity` et non `0` ({{bug(1253350)}}). diff --git a/files/fr/web/javascript/reference/global_objects/atomics/load/index.md b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md index 30f33f6e55..3352d97a0d 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/load/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md @@ -33,7 +33,7 @@ La valeur à la position indiquée (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/or/index.md b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md index bf7ea1613d..cc8676116b 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/or/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md @@ -35,7 +35,7 @@ L'ancienne valeur contenue à l'emplacement du tableau (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/store/index.md b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md index 5f0d594d97..b07bf9fe28 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/store/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md @@ -35,7 +35,7 @@ La valeur qui a été enregistrée. ### Exceptions -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md index e8a668d985..9d983af59e 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md index 1b461ac036..6c8dc3c2fc 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md @@ -35,7 +35,7 @@ L'ancienne valeur située à cet emplacement du tableau (`typedArray[index]`). ### Exceptions -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md index ba569b8723..9f0e47dc94 100644 --- a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md @@ -89,7 +89,7 @@ var bigint = 123456789123456789n; // On utilise un format avec une devise console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); -// → 123.456.789.123.456.789,00 € +// → 123.456.789.123.456.789,00 € // Le yen japonais n'utilise pas de sous-unité console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md index b1fdcdbef7..49e14b5dbd 100644 --- a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md @@ -52,7 +52,7 @@ Si `bigIntObj` est négatif, le signe est conservé, y compris lorsque la base e 17n.toString(); // '17' 66n.toString(2); // '1000010' 254n.toString(16); // 'fe' --10n.toString(2); // -1010' +-10n.toString(2); // -1010' -0xffn.toString(2); // '-11111111' ``` diff --git a/files/fr/web/javascript/reference/global_objects/boolean/index.md b/files/fr/web/javascript/reference/global_objects/boolean/index.md index 970556573d..16c9bf75eb 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/index.md @@ -28,7 +28,7 @@ La valeur passée en premier paramètre est, si nécessaire, convertie en valeur Ne pas confondre les valeurs primitives booléennes `true` et `false` avec les valeurs _true_ et _false_ d'un objet Booléen. -Tout objet dont la valeur n'est ni `undefined` ni `null`, incluant un objet Booléen dont la valeur est fausse, évalue à `true` lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à `true` : +Tout objet dont la valeur n'est ni `undefined` ni `null`, incluant un objet Booléen dont la valeur est fausse, évalue à `true` lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à `true` : ```js var x = new Boolean("false"); diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md index d3c00ab270..a962d7771a 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md @@ -48,9 +48,9 @@ var maVar = flag.toString(); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md index 78b325ede5..1cc6cf14f7 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md @@ -44,9 +44,9 @@ var maVar = x.valueOf() // assigne false à maVar | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md index 879a678bf9..0036b6a81f 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md @@ -40,7 +40,7 @@ dataview.buffer; // ArrayBuffer { byteLength: 8 } | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md index 728d7c3820..3ef748ebed 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md @@ -23,7 +23,7 @@ L'accesseur **`byteLength`** est une propriété représentant la longueur, expr ## Description -La propriété `byteLength` est une propriété accesseur/mutateur dont le mutateur vaut `undefined`. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet `DataView` est construit et ne peut pas être changée. Si `DataView` ne définit pas de décalage avec `byteOffset` ou ne spécifie pas `byteLength`, ce sera la `byteLength` de l'objet `ArrayBuffer` ou `SharedArrayBuffer` référencé qui sera renvoyée. +La propriété `byteLength` est une propriété accesseur/mutateur dont le mutateur vaut `undefined`. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet `DataView` est construit et ne peut pas être changée. Si `DataView` ne définit pas de décalage avec `byteOffset` ou ne spécifie pas `byteLength`, ce sera la `byteLength` de l'objet `ArrayBuffer` ou `SharedArrayBuffer` référencé qui sera renvoyée. ## Exemples @@ -46,7 +46,7 @@ dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md index ec2f25d33a..c843ecefea 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md @@ -23,7 +23,7 @@ La propriété **`byteOffset`** est un accesseur représentant le décalage, exp ## Description -La propriété `byteOffset` est un accesseur/mutateur dont la fonction du mutateur vaut `undefined`. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet `DataView` et ne peut pas être modifiée. +La propriété `byteOffset` est un accesseur/mutateur dont la fonction du mutateur vaut `undefined`. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet `DataView` et ne peut pas être modifiée. ## Exemples @@ -43,7 +43,7 @@ dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue) | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md index 94e7f06fba..1bde7ffa15 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md @@ -57,7 +57,7 @@ dataview.getFloat32(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md index dc7d43000f..944017f2f7 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md @@ -57,7 +57,7 @@ dataview.getFloat64(0); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md index 0d42b98be8..fa1cae8ed8 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md @@ -57,7 +57,7 @@ dataview.getInt16(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md index c611ff5885..5c397df0f1 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md @@ -57,7 +57,7 @@ dataview.getInt32(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md index 137c728e37..9b22ee6798 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md @@ -55,7 +55,7 @@ dataview.getInt8(1); // 0 | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md index c3da190fe2..a39e0e03c0 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md @@ -57,7 +57,7 @@ dataview.getUint16(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md index d45830129d..7ac295ef24 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md @@ -57,7 +57,7 @@ dataview.getUint32(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md index b49458a38a..000647ab08 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md @@ -55,7 +55,7 @@ dataview.getUint8(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/index.md b/files/fr/web/javascript/reference/global_objects/dataview/index.md index 23cfa94e7f..59b4372659 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/index.md @@ -23,7 +23,7 @@ La vue **`DataView`** fournit une interface de bas niveau pour lire et écrire d ### Paramètres - `buffer` - - : Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet `DataView`. + - : Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet `DataView`. - `décalageOctets` {{optional_inline}} - : Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer. - `longueurOctets` {{optional_inline}} diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md index 2ab89de9f2..67865a272c 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md @@ -56,7 +56,7 @@ dataview.getFloat32(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md index c374e3732b..4824e04210 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md @@ -56,7 +56,7 @@ dataview.getFloat64(0); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md index 60e26fd516..6bf94913f2 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md @@ -56,7 +56,7 @@ dataview.getInt16(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015 (ES6). | | {{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md index 65e8802da3..676178fa20 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md @@ -56,7 +56,7 @@ dataview.getInt32(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md index 80f169d855..989ebb5aff 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md @@ -54,7 +54,7 @@ dataview.getInt8(1); // 3 | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md index 350929f26d..e11b9efc89 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md @@ -56,7 +56,7 @@ dataview.getUint16(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md index 15dc13fe04..576f5957ed 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md @@ -56,7 +56,7 @@ dataview.getUint32(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015 (ES6). | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md index 45c7db8f89..0fe5fcb82b 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md @@ -54,7 +54,7 @@ dataview.getUint8(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md index 574dd32262..c075fd3260 100644 --- a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md @@ -26,7 +26,7 @@ La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument La méthode `[@@toPrimitive]()` de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère. -Si le paramètre `hint` vaut `"string"` ou `"default"`, `[@@toPrimitive]()` tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété `toString()` n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, `[@@toPrimitive]()` lèvera une exception {{jsxref("TypeError")}}. +Si le paramètre `hint` vaut `"string"` ou `"default"`, `[@@toPrimitive]()` tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété `toString()` n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, `[@@toPrimitive]()` lèvera une exception {{jsxref("TypeError")}}. Si le paramètre `hint` vaut `"number"`, `[@@toPrimitive]()` tentera d'abord un appel à `valueOf()` puis ensuite un appel à `toString()`. @@ -37,7 +37,7 @@ Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir u | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md index 934bca97de..6be217798e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md @@ -32,7 +32,7 @@ Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon ### Utiliser `getDate()` -La seconde instruction ci-dessous affecte la valeur 25 à la variable `jour`, d'après la valeur de l'objet {{jsxref("Date")}} `Noel95`. +La seconde instruction ci-dessous affecte la valeur 25 à la variable `jour`, d'après la valeur de l'objet {{jsxref("Date")}} `Noel95`. ```js var Noel95 = new Date("December 25, 1995 23:15:00"); @@ -45,9 +45,9 @@ console.log(jour); // 25 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getday/index.md b/files/fr/web/javascript/reference/global_objects/date/getday/index.md index 343fc41fcc..b145ff2af9 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getday/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getday/index.md @@ -51,9 +51,9 @@ console.log(jourSemaine); //1 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md index d3cf612ee7..e826083b98 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md @@ -42,9 +42,9 @@ var année = aujd.getFullYear(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gethours/index.md b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md index 502652786f..d88ad24ea5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gethours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md @@ -28,7 +28,7 @@ Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon ### Utiliser `getHours()` -La seconde instruction ci-dessous assigne la valeur 23 à la variable `heure`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 23 à la variable `heure`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -42,9 +42,9 @@ console.log(heure); //23 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md index 5476fccef0..c595e58b19 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md @@ -40,9 +40,9 @@ var ms = aujd.getMilliseconds(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md index f7a9657f90..d841fb35e6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md @@ -28,7 +28,7 @@ La valeur renvoyée par `getMinutes` est un entier entre 0 et 59 représentant l ### Utiliser `getMinutes()` -La seconde instruction ci-dessous assigne la valeur 15 à la variable `minutes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 15 à la variable `minutes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -42,9 +42,9 @@ console.log(minutes); //15 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md index 2f3cdd1c3f..6d15d5aefe 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md @@ -28,7 +28,7 @@ Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure l ### Utiliser `getMonth()` -La seconde instruction ci-dessous assigne la valeur 11 à la variable `mois`, d'après la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 11 à la variable `mois`, d'après la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -52,9 +52,9 @@ console.log(mois); //11 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md index ddbd49d19a..dc15cdc3b5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md @@ -28,7 +28,7 @@ La valeur renvoyée par `getSeconds()` est un entier entre 0 et 59 correspondant ### Utiliser `getSeconds()` -La seconde instruction ci-dessous assigne la valeur 30 à la variable `secondes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 30 à la variable `secondes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:30"); @@ -42,9 +42,9 @@ console.log(secondes); //30 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gettime/index.md b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md index 9c2ac28bca..2df8a93f76 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gettime/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md @@ -82,9 +82,9 @@ Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md index a313ba77c9..cffbb02de1 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md @@ -48,9 +48,9 @@ var decalage = travail.getTimezoneOffset() / 60; | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md index 5f062ea4fb..c59486641e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md @@ -40,9 +40,9 @@ var jour = aujourdhui.getUTCDate(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md index 6fe7f094b9..3565659b64 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md @@ -40,9 +40,9 @@ var jourSemaine = aujourdhui.getUTCDay() | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md index a481accedf..c5f4868b8d 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md @@ -40,9 +40,9 @@ var annee = aujourdhui.getUTCFullYear(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md index 186c88055b..380ec98546 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md @@ -40,9 +40,9 @@ var heures = aujourdhui.getUTCHours(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md index 5cda61f0a0..dceaadf252 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md @@ -40,9 +40,9 @@ var minutes = aujourdhui.getUTCMinutes(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md index 562f934ba4..37782e98a6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md @@ -40,9 +40,9 @@ var mois = aujourdhui.getUTCMonth(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md index 10b092970d..55a4ca8744 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md @@ -40,9 +40,9 @@ var secondes = aujourdhui.getUTCSeconds(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md index 30f96ed639..c5622e08c5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md @@ -25,7 +25,7 @@ Un nombre représentant l'année de la date indiquée, selon l'heure locale, auq ## Description -La méthode `getYear()` renvoie l'année moins 1900 ; par conséquent : +La méthode `getYear()` renvoie l'année moins 1900 ; par conséquent : - Pour les années supérieures ou égales à 2000, la valeur renvoyée par `getYear()` est supérieure ou égale à 100. Par exemple, si l'année est 2026, `getYear()` renvoie 126. - Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` est comprise entre 0 et 99. Par exemple, si l'année est 1976, `getYear()` renvoie 76. @@ -37,7 +37,7 @@ Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser ### Comportement dans JavaScript 1.2 et versions antérieures -La méthode `getYear()` renvoyait soit une année en deux chiffres, soit une année en quatre chiffres : +La méthode `getYear()` renvoyait soit une année en deux chiffres, soit une année en quatre chiffres : - Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76. - Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par `getYear` était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026. diff --git a/files/fr/web/javascript/reference/global_objects/date/index.md b/files/fr/web/javascript/reference/global_objects/date/index.md index d5ed46eb1a..9bab8acc15 100644 --- a/files/fr/web/javascript/reference/global_objects/date/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/index.md @@ -152,7 +152,7 @@ Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différen Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript : -> **Note :** L'analyse de chaîne de caractères représentant des dates avec le constructeur `Date` (ou `Date.parse` qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs. +> **Note :** L'analyse de chaîne de caractères représentant des dates avec le constructeur `Date` (ou `Date.parse` qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs. ```js let aujourdhui = new Date() diff --git a/files/fr/web/javascript/reference/global_objects/date/now/index.md b/files/fr/web/javascript/reference/global_objects/date/now/index.md index 27cfc90da5..d7689118ad 100644 --- a/files/fr/web/javascript/reference/global_objects/date/now/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/now/index.md @@ -70,8 +70,8 @@ Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES6', '#sec-date.now', 'Date.now')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.now', 'Date.now')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.now', 'Date.now')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.now', 'Date.now')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.md b/files/fr/web/javascript/reference/global_objects/date/parse/index.md index 452ba6f030..c8395e31ad 100644 --- a/files/fr/web/javascript/reference/global_objects/date/parse/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.md @@ -73,7 +73,7 @@ Date('2014-25-23').toISOString(); // renvoie "RangeError: invalid date" pour les navigateurs ES5 ``` -L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne. +L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne. ```js new Date('10 06 2014'); diff --git a/files/fr/web/javascript/reference/global_objects/date/setdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md index f45a1bf341..22a6303307 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md @@ -44,7 +44,7 @@ Si on fournit un nombre négatif, la date sera déterminée à rebours à partir ```js var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z theBigDay.setDate(24); // 1962-07-23T23:00:00.000Z -theBigDay.setDate(32); // 1962-07-31T23:00:00.000Z +theBigDay.setDate(32); // 1962-07-31T23:00:00.000Z theBigDay.setDate(22); // 1962-08-21T23:00:00.000Z theBigDay.setDate(0); // 1962-07-30T23:00:00.000Z theBigDay.setDate(98); // 1962-10-05T23:00:00.000Z @@ -56,9 +56,9 @@ theBigDay.setDate(-50); // 1962-08-10T23:00:00.000Z | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md index c5ce1547e4..52ed862d65 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md @@ -53,9 +53,9 @@ leGrandJour.setFullYear(1997); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/sethours/index.md b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md index 0571dbdf8b..b789309819 100644 --- a/files/fr/web/javascript/reference/global_objects/date/sethours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md @@ -59,9 +59,9 @@ leGrandJour.setHours(7); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0 | -| {{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md index e6ab186569..ab0ab2e2ae 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md @@ -47,9 +47,9 @@ leGrandJour.setMilliseconds(100); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md index 894474edac..6e290e16b6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md @@ -57,9 +57,9 @@ leGrandJour.setMinutes(45); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md index adaccb768d..564802f6ff 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md @@ -64,9 +64,9 @@ leGrandJour.setMonth(6); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md index b6db54ba85..5f3108ae2f 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md @@ -55,9 +55,9 @@ leGrandJour.setSeconds(30) | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/settime/index.md b/files/fr/web/javascript/reference/global_objects/date/settime/index.md index 01c26769a9..70cb934f66 100644 --- a/files/fr/web/javascript/reference/global_objects/date/settime/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/settime/index.md @@ -48,9 +48,9 @@ pareilQueGrandJour.setTime(leGrandJour.getTime()); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md index b2b6aa67a4..3a17a05b0d 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md @@ -47,9 +47,9 @@ leGrandJour.setUTCDate(20); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md index 4490cf9d6a..c09f8ab805 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md @@ -53,9 +53,9 @@ leGrandJour.setUTCFullYear(1997); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md index 775990f78e..f80851fec6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md @@ -55,9 +55,9 @@ leGrandJour.setUTCHours(8); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md index 7e7e0a4e3d..36fd2480a2 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md @@ -47,9 +47,9 @@ leGrandJour.setUTCMilliseconds(500); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md index ebf0a4ead5..c174a9bbd7 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md @@ -53,9 +53,9 @@ leGrandJour.setUTCMinutes(43); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md index 580acfb674..29b34a6fdd 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md @@ -51,9 +51,9 @@ leGrandJour.setUTCMonth(11); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md index ffb683924a..deab5c8101 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md @@ -51,9 +51,9 @@ leGrandJour.setUTCSeconds(20); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md index 04e1ce306e..b2388ffbba 100644 --- a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md @@ -72,8 +72,8 @@ if ( !Date.prototype.toISOString ) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8. | -| {{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/tojson/index.md b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md index 7909061c35..c51547e4d5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tojson/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md @@ -44,8 +44,8 @@ console.log(jsonDate); //2015-10-26T07:46:36.611Z | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md index 4b7179dfdd..4b643733d1 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md @@ -74,7 +74,7 @@ console.log(date.toLocaleTimeString("en-US")); console.log(date.toLocaleTimeString("en-GB")); // → "04:00:00" -// le coréen utilise une heure sur 12h avec AM/PM +// le coréen utilise une heure sur 12h avec AM/PM console.log(date.toLocaleTimeString("ko-KR")); // → "오전 4:00:00" diff --git a/files/fr/web/javascript/reference/global_objects/date/tostring/index.md b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md index f25b125d01..394b060984 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md @@ -82,10 +82,10 @@ var maVar = x.toString(); // assigne une valeur à maVar similaire à : | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES6')}} | | | {{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES2018')}} | Standardisation du format produit par `Date.prototype.toString()` | -| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md index cabaa9ae84..28d6ae0d8b 100644 --- a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md @@ -28,7 +28,7 @@ Une chaîne de caractères qui représente l'heure de la date indiquée dans un Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode `toTimeString().` -La méthode `toTimeString()` est particulièrement utile parce que les moteurs implémentant [ECMA-262](/fr/docs/JavaScript/Language_Resources) peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs. +La méthode `toTimeString()` est particulièrement utile parce que les moteurs implémentant [ECMA-262](/fr/docs/JavaScript/Language_Resources) peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs. ## Exemple @@ -46,9 +46,9 @@ console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT) | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md index b7db523967..c5eec55b0e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md @@ -45,10 +45,10 @@ var UTCstring = aujourdhui.toUTCString(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation. | -| {{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES6')}} | | | {{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES2018')}} | Première standardisation du format | -| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/utc/index.md b/files/fr/web/javascript/reference/global_objects/date/utc/index.md index 6dbf12f938..96b8b00062 100644 --- a/files/fr/web/javascript/reference/global_objects/date/utc/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/utc/index.md @@ -48,7 +48,7 @@ Un nombre représentant le nombre de millisecondes écoulées entre la date indi La méthode `UTC` prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées. -Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée. +Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée. La méthode `UTC` diffère du constructeur {{jsxref("Date")}} pour deux raisons : @@ -63,7 +63,7 @@ Comme `UTC` est une méthode statique de `Date`, on l'utilise toujours sous la f ### Utiliser `Date.UTC()` -L'instruction qui suit crée un objet `Date` en utilisant l'heure UTC plutôt que l'heure locale : +L'instruction qui suit crée un objet `Date` en utilisant l'heure UTC plutôt que l'heure locale : ```js var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); diff --git a/files/fr/web/javascript/reference/global_objects/date/valueof/index.md b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md index 684d275338..b630d3fac8 100644 --- a/files/fr/web/javascript/reference/global_objects/date/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md @@ -26,7 +26,7 @@ Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC ## Description -La méthode `valueOf()` renvoie la valeur primitive d'un objet `Date` sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT. +La méthode `valueOf()` renvoie la valeur primitive d'un objet `Date` sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT. D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}. @@ -46,9 +46,9 @@ var maVar = x.valueOf(); // maVar vaut -424713600000 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md index e825bcbbc0..cf11ba1145 100644 --- a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md +++ b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md @@ -48,9 +48,9 @@ decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/encodeuri/index.md b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md index 02eade980e..51d9fcefce 100644 --- a/files/fr/web/javascript/reference/global_objects/encodeuri/index.md +++ b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md @@ -49,7 +49,7 @@ console.log(encodeURIComponent(set2)); // -_.!~*'() console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20) ``` -Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère *surrogate* (demi-codet) qui ne fait pas partie d'une paire : +Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère *surrogate* (demi-codet) qui ne fait pas partie d'une paire : ```js // On a une paire de codets surrogate @@ -64,7 +64,7 @@ console.log(encodeURI('\uD800')); console.log(encodeURI('\uDFFF')); ``` -`encodeURI()` ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères). +`encodeURI()` ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères). Si on souhaite suivre la [RFC3986](http://tools.ietf.org/html/rfc3986) qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant : diff --git a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md index 39639333d3..268bf360a7 100644 --- a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md +++ b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md @@ -121,9 +121,9 @@ function encodeRFC5987ValueChars2(str) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/index.md b/files/fr/web/javascript/reference/global_objects/error/index.md index 037520b23f..aa726f4f2a 100644 --- a/files/fr/web/javascript/reference/global_objects/error/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Error --- {{JSRef}} -Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Error` sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet `Error` peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard. +Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Error` sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet `Error` peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard. ## Syntaxe @@ -19,17 +19,17 @@ Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Err ### Paramètres - `message` {{optional_inline}} - - : Description de l'erreur sous une forme lisible par un humain. + - : Description de l'erreur sous une forme lisible par un humain. - `fileName` {{optional_inline}}{{Non-standard_inline}} - - : Argument qui sera utilisé pour la valeur de la propriété `fileName` dans l'objet `Error` créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur `Error()`. + - : Argument qui sera utilisé pour la valeur de la propriété `fileName` dans l'objet `Error` créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur `Error()`. - `lineNumber` {{optional_inline}}{{Non-standard_inline}} - - : Argument qui sera utilisé pour la valeur de la propriété `lineNumber` dans l'objet `Error` créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur `Error()`. + - : Argument qui sera utilisé pour la valeur de la propriété `lineNumber` dans l'objet `Error` créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur `Error()`. ## Description -Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets `Error`. +Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets `Error`. -Cette page documente l'utilisation de l'objet `Error` lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'`Error`, voir {{jsxref("Error.prototype")}}. +Cette page documente l'utilisation de l'objet `Error` lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'`Error`, voir {{jsxref("Error.prototype")}}. ### Utilisation de `Error` comme fonction @@ -45,33 +45,33 @@ const y = new Error("J'ai été créée avec new"); ### Types d'erreur -En plus du constructeur `Error` générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir [Contrôle du flux d'instructions et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs). +En plus du constructeur `Error` générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir [Contrôle du flux d'instructions et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs). - {{jsxref("EvalError")}} - - : Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}. + - : Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}. - {{jsxref("RangeError")}} - : Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité. - {{jsxref("ReferenceError")}} - - : Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide. + - : Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide. - {{jsxref("SyntaxError")}} - - : Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}. + - : Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}. - {{jsxref("TypeError")}} - : Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide. - {{jsxref("URIError")}} - - : Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}. + - : Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}. - {{JSxRef("AggregateError")}} - : Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}. - {{jsxref("InternalError")}} {{non-standard_inline}} - - : Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion". + - : Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion". ## Propriétés - {{jsxref("Error.prototype")}} - - : Permet l'ajout de propriétés aux instances `Error`. + - : Permet l'ajout de propriétés aux instances `Error`. ## Méthodes -L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype. +L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype. ## Instances d'`Error` @@ -89,7 +89,7 @@ L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hé ### Déclenchement d'une erreur générique -Vous créez habituellement un objet `Error` dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} : +Vous créez habituellement un objet `Error` dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} : ```js try { @@ -101,7 +101,7 @@ try { ### Gestion d'une erreur spécifique -Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} : +Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} : ```js try { @@ -118,13 +118,13 @@ try { ### Types d'erreur personnalisés -Vous pouvez vouloir définir vos propres types d'erreur dérivants d'`Error` pour pouvoir écrire `throw new MonErreur()` et utiliser `instanceof MonErreur` afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir [_What's a good way to extend Error in JavaScript?_](http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) sur StackOverflow pour une discussion en profondeur. +Vous pouvez vouloir définir vos propres types d'erreur dérivants d'`Error` pour pouvoir écrire `throw new MonErreur()` et utiliser `instanceof MonErreur` afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir [_What's a good way to extend Error in JavaScript?_](http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) sur StackOverflow pour une discussion en profondeur. #### Classes d'erreur personnalisées avec ECMAScript 2015 / ES6 -> **Attention :** Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans [configuration supplémentaire](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend). Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). +> **Attention :** Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans [configuration supplémentaire](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend). Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). -> **Note :** Certains navigateurs incluent le constructeur `CustomError` (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6. +> **Note :** Certains navigateurs incluent le constructeur `CustomError` (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6. ```js class CustomError extends Error { @@ -153,9 +153,9 @@ try { } ``` -#### Objet d'erreur personnalisé ES5 +#### Objet d'erreur personnalisé ES5 -> **Attention :** Tous les navigateurs incluent le constructeur `CustomError` dans la pile d'appel lorsqu'une déclaration prototypale est utilisée. +> **Attention :** Tous les navigateurs incluent le constructeur `CustomError` dans la pile d'appel lorsqu'une déclaration prototypale est utilisée. ```js function CustomError(machin, message, nomFichier, numeroLigne) { diff --git a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md index b2a2a1ff5a..3358206394 100644 --- a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md @@ -29,7 +29,7 @@ console.log(e.lineNumber) // 2 ```js window.addEventListener("error", function (e) { - console.log(e.lineNumber); //5 + console.log(e.lineNumber); //5 }); var e = new Error('Ne peut pas lire la donnée'); throw e; diff --git a/files/fr/web/javascript/reference/global_objects/error/message/index.md b/files/fr/web/javascript/reference/global_objects/error/message/index.md index 47c745abbe..c0f55368d4 100644 --- a/files/fr/web/javascript/reference/global_objects/error/message/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/message/index.md @@ -35,9 +35,9 @@ throw e; | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/name/index.md b/files/fr/web/javascript/reference/global_objects/error/name/index.md index 9ef6dbf87e..e17557d6ce 100644 --- a/files/fr/web/javascript/reference/global_objects/error/name/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/name/index.md @@ -35,9 +35,9 @@ throw e; | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/stack/index.md b/files/fr/web/javascript/reference/global_objects/error/stack/index.md index 94bc830aeb..b827345665 100644 --- a/files/fr/web/javascript/reference/global_objects/error/stack/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/stack/index.md @@ -13,17 +13,17 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack --- {{JSRef}} {{non-standard_header}} -La propriété non-standard **`stack`** des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale. +La propriété non-standard **`stack`** des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale. ## Description -Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés `fileName`, `lineNumber` et `columnNumber` pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)). +Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés `fileName`, `lineNumber` et `columnNumber` pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)). -Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)). +Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)). -**Valeurs des arguments dans la pile :** avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie `"[object Object]"`, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser `arguments.callee.caller.arguments`, tout comme le nom de la fonction pouvait être récupéré avec `arguments.callee.caller.name`). `"undefined"` est listé comme `"(void 0)"`. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme `"@"`, `"("`, `")"` (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème. +**Valeurs des arguments dans la pile :** avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie `"[object Object]"`, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser `arguments.callee.caller.arguments`, tout comme le nom de la fonction pouvait être récupéré avec `arguments.callee.caller.name`). `"undefined"` est listé comme `"(void 0)"`. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme `"@"`, `"("`, `")"` (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème. -Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la [documentation MSDN](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) semble correspondre à l'implémentation PhantomJS. +Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la [documentation MSDN](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) semble correspondre à l'implémentation PhantomJS. ## Exemples @@ -53,9 +53,9 @@ Le code HTML suivant démontre l'utilisation de la propriété `stack`. </script> ``` -En supposant que ce code a été enregistré comme `C:\exemple.html` sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant : +En supposant que ce code a été enregistré comme `C:\exemple.html` sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant : -À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne ({{bug(762556)}}) : +À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne ({{bug(762556)}}) : ```html trace@file:///C:/exemple.html:9:17 @@ -71,7 +71,7 @@ De Firefox 14 à Firefox 29 : a@file:///C:/exemple.html:19 @file:///C:/exemple.html:21 -Firefox 13 et antérieur aurait produit à la place le texte suivant : +Firefox 13 et antérieur aurait produit à la place le texte suivant : Error("monError")@:0 trace()@file:///C:/exemple.html:9 @@ -79,9 +79,9 @@ Firefox 13 et antérieur aurait produit à la place le texte suivant : a("premier appel, premierarg")@file:///C:/exemple.html:19 @file:///C:/exemple.html:21 -### Pile d'un code evalué +### Pile d'un code evalué -À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à `Function()` et `eval()` produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par `"> Function"` et les appels d'`eval` par `"> eval"`. Voir {{bug("332176")}}. +À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à `Function()` et `eval()` produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par `"> Function"` et les appels d'`eval` par `"> eval"`. Voir {{bug("332176")}}. ```js try { @@ -104,7 +104,7 @@ try { // @file:///C:/exemple.html:7:6 ``` -Vous pouvez aussi utiliser la directive `//# sourceURL` pour nommer une source eval. Voir aussi [Déboguer des sources évaluées](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources) dans les docs [Débogueur](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger), ainsi que ce [blog post](http://fitzgeraldnick.com/weblog/59/). +Vous pouvez aussi utiliser la directive `//# sourceURL` pour nommer une source eval. Voir aussi [Déboguer des sources évaluées](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources) dans les docs [Débogueur](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger), ainsi que ce [blog post](http://fitzgeraldnick.com/weblog/59/). ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/error/tosource/index.md b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md index 9876514034..efc31d46d3 100644 --- a/files/fr/web/javascript/reference/global_objects/error/tosource/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md @@ -33,7 +33,7 @@ Appeler la méthode `toSource()` d'une instance {{jsxref("Error")}} ([Erreurs na où ces attributs correspondent aux propriétés respectives de l'instance `Error`. -> **Note :** Les propriétés utilisées par la méthode `toSource()` dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale. +> **Note :** Les propriétés utilisées par la méthode `toSource()` dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale. ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/error/tostring/index.md b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md index 97119fcb6e..15df5e7eb6 100644 --- a/files/fr/web/javascript/reference/global_objects/error/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md @@ -24,7 +24,7 @@ Une chaîne de caractères représentant l'objet {{jsxref("Error")}}. ## Description -L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) : +L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) : ```js Error.prototype.toString = function () { diff --git a/files/fr/web/javascript/reference/global_objects/eval/index.md b/files/fr/web/javascript/reference/global_objects/eval/index.md index e28f94f20e..ac3cab5b4b 100644 --- a/files/fr/web/javascript/reference/global_objects/eval/index.md +++ b/files/fr/web/javascript/reference/global_objects/eval/index.md @@ -53,7 +53,7 @@ var expression = new String("2 + 2"); eval(expression.toString()); ``` -Si la fonction `eval` est utilisée de manière indirecte, en l'invoquant par une référence autre que `eval`, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction `eval` est appelée. +Si la fonction `eval` est utilisée de manière indirecte, en l'invoquant par une référence autre que `eval`, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction `eval` est appelée. ```js function test() { @@ -135,7 +135,7 @@ console.log(runCodeWithDateFunction( 2\. Le surcoût lié à un appel de fonction est léger -3\. `Function()` permet d'utiliser `"use strict";` (qui peut également aider à améliorer les performances). +3\. `Function()` permet d'utiliser `"use strict";` (qui peut également aider à améliorer les performances). Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par diff --git a/files/fr/web/javascript/reference/global_objects/evalerror/index.md b/files/fr/web/javascript/reference/global_objects/evalerror/index.md index 7000c66f7c..6147b8c61c 100644 --- a/files/fr/web/javascript/reference/global_objects/evalerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/evalerror/index.md @@ -72,7 +72,7 @@ try { | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale | | {{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}} | {{Spec2('ES5.1')}} | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. | | {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ES6')}} | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.md b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md index a8272388ce..4813b41f6e 100644 --- a/files/fr/web/javascript/reference/global_objects/function/arguments/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md @@ -17,7 +17,7 @@ La propriété **`function.arguments`** fait référence à un objet dont la str ## Description -La syntaxe `function.arguments` est obsolète. La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}. +La syntaxe `function.arguments` est obsolète. La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}. Si on utilise la récursivité (autrement dit si une fonction `f` apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction `f` s'appelle elle-même), la valeur de `f.arguments` représentera les arguments correspondant à l'appel le plus « récent » de la fonction. diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.md b/files/fr/web/javascript/reference/global_objects/function/bind/index.md index e6cec185cf..1580f43988 100644 --- a/files/fr/web/javascript/reference/global_objects/function/bind/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.md @@ -56,9 +56,9 @@ Une fonction liée peut également être construite à l'aide de l'opérateur {{ ### Créer une fonction liée -La façon la plus simple d'utiliser `bind()`est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur `this` donnée. +La façon la plus simple d'utiliser `bind()`est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur `this` donnée. -Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de `this` (par exemple en utilisant cette méthode dans un _callback_). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème : +Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de `this` (par exemple en utilisant cette méthode dans un _callback_). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème : ```js this.x = 9; // en dehors de tout contexte, @@ -66,7 +66,7 @@ this.x = 9; // en dehors de tout contexte, // l'objet window var module = { x: 81, - getX: function() { return this.x; } + getX: function() { return this.x; } }; module.getX(); // 81 @@ -82,7 +82,7 @@ boundGetX(); // 81 ### Fonctions partiellement appliquées -Dans l'exemple suivant, on utilise `bind()` afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le `this` fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée. +Dans l'exemple suivant, on utilise `bind()` afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le `this` fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée. ```js function list() { @@ -109,7 +109,7 @@ var resultat = ajouter37(5); // 37 + 5 = 42 ### Utiliser `bind` avec `setTimeout` -Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé `this` sera attribué à l'objet {{domxref("window")}} (ou l'objet `global`). Lorsqu'on travaille avec des méthodes de classe utilisant `this` qui se réfère à l'instance, on peut lier `this` de façon explicite afin d'être certain de manipuler l'instance. +Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé `this` sera attribué à l'objet {{domxref("window")}} (ou l'objet `global`). Lorsqu'on travaille avec des méthodes de classe utilisant `this` qui se réfère à l'instance, on peut lier `this` de façon explicite afin d'être certain de manipuler l'instance. ```js function Fleur() { @@ -133,7 +133,7 @@ fleur.floraison(); ### Les fonctions liées utilisées en tant que constructeurs -> **Attention :** Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production. +> **Attention :** Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production. Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le `this` fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur : @@ -165,7 +165,7 @@ axisPoint instanceof YAxisPoint; // true new Point(17, 42) instanceof YAxisPoint; // false ``` -On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}. +On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}. ```js // Cet exemple fonctionne dans votre console JavaScript @@ -178,11 +178,11 @@ YAxisPoint(13); emptyObj.x + "," + emptyObj.y; // "0,13" ``` -Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulement `new`, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction. +Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulement `new`, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction. ### Créer des raccourcis -`bind()` est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un `this` ayant une certaine valeur. +`bind()` est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un `this` ayant une certaine valeur. Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet `array`, on peut créer un raccourci de cette façon : @@ -194,7 +194,7 @@ var slice = Array.prototype.slice; slice.apply(arguments); ``` -Avec `bind()`, il est possible de simplifier cela. Dans l'exemple qui suit `slice` est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de `Function.prototype`, et `this` défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode `apply()` peuvent être éliminés : +Avec `bind()`, il est possible de simplifier cela. Dans l'exemple qui suit `slice` est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de `Function.prototype`, et `this` défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode `apply()` peuvent être éliminés : ```js // pareil que "slice" dans l'exemple précédent diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.md b/files/fr/web/javascript/reference/global_objects/function/call/index.md index 5226e7b387..335b9b18f0 100644 --- a/files/fr/web/javascript/reference/global_objects/function/call/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/call/index.md @@ -135,9 +135,9 @@ afficher.call(); // prenom est Archibald | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.md b/files/fr/web/javascript/reference/global_objects/function/length/index.md index 91f954d94e..11fde1025f 100644 --- a/files/fr/web/javascript/reference/global_objects/function/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/length/index.md @@ -47,9 +47,9 @@ console.log((function(a, b = 1, c) {}).length); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ES6')}} | L'attribut `configurable` de cette propriété vaut `true` désormais. | -| {{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.md b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md index 0eac5c45c6..dde5346cf2 100644 --- a/files/fr/web/javascript/reference/global_objects/function/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md @@ -55,7 +55,7 @@ Si la méthode `toString()` est appelée sur une fonction créée avec le constr | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | | [`Function.prototype.toString()`](https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction) | Brouillon | Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne. | | {{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ES6')}} | Critères supplémentaires ajoutés sur la représentation de la chaîne. | -| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/next/index.md b/files/fr/web/javascript/reference/global_objects/generator/next/index.md index 50b15b29a3..090a518142 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/next/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/next/index.md @@ -80,7 +80,7 @@ g.next(2); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/return/index.md b/files/fr/web/javascript/reference/global_objects/generator/return/index.md index e428eb93f7..b2eb2e85de 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/return/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/return/index.md @@ -70,7 +70,7 @@ g.next(); // { value: undefined, done: true } | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/throw/index.md b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md index c40496187f..bd6c0c98f4 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/throw/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md @@ -65,7 +65,7 @@ g.throw(new Error("Quelque chose s'est mal passé")); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md index f9faec0967..905c2e8ebf 100644 --- a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md +++ b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md @@ -75,7 +75,7 @@ console.log(itérateur.next().value); // 20 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/index.md b/files/fr/web/javascript/reference/global_objects/index.md index 0c2020b20d..d0225aca80 100644 --- a/files/fr/web/javascript/reference/global_objects/index.md +++ b/files/fr/web/javascript/reference/global_objects/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes. -Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l*'objet global*. Ici, « objets globaux » se réfère aux _objets de portée globale_. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale _consiste des_ propriétés de l'objet global (avec ses propriétés héritées, s'il en a). +Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l*'objet global*. Ici, « objets globaux » se réfère aux _objets de portée globale_. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale _consiste des_ propriétés de l'objet global (avec ses propriétés héritées, s'il en a). > **Note :** En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), la portée globale représentée par `this` sera {{jsxref("undefined")}}. diff --git a/files/fr/web/javascript/reference/global_objects/infinity/index.md b/files/fr/web/javascript/reference/global_objects/infinity/index.md index 0be346bb70..dd6688fa11 100644 --- a/files/fr/web/javascript/reference/global_objects/infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/infinity/index.md @@ -23,7 +23,7 @@ La propriété globale **`Infinity`** est une valeur numérique représentant l' `Infinity` est une propriété de _l'objet global_ , c'est-à-dire qu'elle est accessible globalement. -La valeur initiale d'`Infinity` est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur `Infinity` (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par `Infinity` vaut `Infinity`, et tout ce qui est divisé par `Infinity` vaut 0. +La valeur initiale d'`Infinity` est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur `Infinity` (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par `Infinity` vaut `Infinity`, et tout ce qui est divisé par `Infinity` vaut 0. D'après la spécification ECMAScript 5, `Infinity` est en lecture seule. @@ -42,9 +42,9 @@ console.log(1 / Infinity); // 0 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/int16array/index.md b/files/fr/web/javascript/reference/global_objects/int16array/index.md index ea66a5b893..dd63eab8ba 100644 --- a/files/fr/web/javascript/reference/global_objects/int16array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int16array/index.md @@ -27,7 +27,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int16Array`, la propriété vaudra 2. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int16Array`, la propriété vaudra 2. - `Int16Array.length` - : Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int16Array.name")}} @@ -38,7 +38,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Méthodes - {{jsxref("TypedArray.from", "Int16Array.from()")}} - - : Crée un nouvel objet `Int16Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. + - : Crée un nouvel objet `Int16Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. - {{jsxref("TypedArray.of", "Int16Array.of()")}} - : Crée un nouvel objet `Int16Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}. diff --git a/files/fr/web/javascript/reference/global_objects/int32array/index.md b/files/fr/web/javascript/reference/global_objects/int32array/index.md index 81192d739d..ef911d069d 100644 --- a/files/fr/web/javascript/reference/global_objects/int32array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int32array/index.md @@ -27,7 +27,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int32Array`, la propriété vaudra 4. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int32Array`, la propriété vaudra 4. - `Int32Array.length` - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int32Array.name")}} diff --git a/files/fr/web/javascript/reference/global_objects/int8array/index.md b/files/fr/web/javascript/reference/global_objects/int8array/index.md index 9ba2e0b403..1f74b75ee4 100644 --- a/files/fr/web/javascript/reference/global_objects/int8array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int8array/index.md @@ -28,7 +28,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int8Array`, la propriété vaudra 1. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int8Array`, la propriété vaudra 1. - `Int8Array.length` - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int8Array.name")}} @@ -39,7 +39,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Méthodes - Int8Array.from() - - : Crée un nouvel objet `Int8Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. + - : Crée un nouvel objet `Int8Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. - Int8Array.of() - : Crée un nouvel objet `Int8Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}. diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md index 0c4e0f30e3..3372ae1d9c 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md @@ -30,7 +30,7 @@ La méthode **`Intl.Collator.prototype.compare()`** compare deux chaînes de car ## Description -L'accesseur `compare` renvoie un nombre qui indique le résultat de la comparaison entre `chaine1` et `chaine2` selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si `chaine1` précède `chaine2`, positive si `chaine1` succède à `chaine2`, nulle si les deux chaînes sont considérées égales. +L'accesseur `compare` renvoie un nombre qui indique le résultat de la comparaison entre `chaine1` et `chaine2` selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si `chaine1` précède `chaine2`, positive si `chaine1` succède à `chaine2`, nulle si les deux chaînes sont considérées égales. ## Exemples @@ -66,8 +66,8 @@ console.log(matches.join(", ")); | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md index 497d476044..344ed087fd 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md @@ -26,7 +26,7 @@ L'objet **`Intl.Collator`** est un constructeur de « collecteurs », des objets - `locales` - - : Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées : + - : Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées : - `co` - : Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : `"big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan"`. Les valeurs `"standard"` et `"search"` sont ignorées. Elles sont remplacées par la propriété `usage` de l'argument `options` (voir ci-après). @@ -119,7 +119,7 @@ console.log(new Intl.Collator("sv").compare("ä", "z")); ### Utiliser `options` -Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument `options` : +Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument `options` : ```js // en allemand, 'ä' est composé de la lettre de base 'a' @@ -136,8 +136,8 @@ console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a")); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md index 665b0ff858..e91c798f28 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLo --- {{JSRef}} -La méthode **`Intl.Collator.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement. +La méthode **`Intl.Collator.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement. {{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}} @@ -43,7 +43,7 @@ Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locale ## Exemples -Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. +Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. ```js var locales = ["ban", "id-u-co-pinyin", "de-ID"]; @@ -57,8 +57,8 @@ console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", ")); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md index 1fb93f7064..079d83bd14 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md @@ -86,8 +86,8 @@ let formattedDate = Intl.DateTimeFormat(undefined, { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md index 3230687f4d..d64489ca1f 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -49,7 +49,7 @@ L'objet **`Intl.DateTimeFormat`** est un constructeur d'objets permettant de for - `formatMatcher` - : L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont `"basic"` et `"best fit"` ; par défaut `"best fit"`. Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété. - Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie. Les implémentations ont pour obligation de supporter au minimum les ensembles suivants : + Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie. Les implémentations ont pour obligation de supporter au minimum les ensembles suivants : - `weekday, year, month, day, hour, minute, second` - `weekday, year, month, day` diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md index 13f5517dce..6bd6141497 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -45,7 +45,7 @@ Renvoie un tableau qui est un sous-ensemble de `locales`. Les balises de langues ### Utiliser `supportedLocalesOf` -Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise. +Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise. ```js var locales = ["ban", "id-u-co-pinyin", "de-ID"]; @@ -59,8 +59,8 @@ console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", ")) | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/index.md b/files/fr/web/javascript/reference/global_objects/intl/index.md index 71920ac7ae..37ab9d9a44 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/index.md @@ -65,7 +65,7 @@ La BCP 47 permet également des extensions. Les fonctions d'internalisation de J ### Négociation de la locale -L'argument `locales`, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans [BCP 47](http://tools.ietf.org/html/rfc4647#section-3.4); l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument `locales` ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument `options` (voir ci-dessous). +L'argument `locales`, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans [BCP 47](http://tools.ietf.org/html/rfc4647#section-3.4); l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument `locales` ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument `options` (voir ci-dessous). Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand. diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md index f18d79b75b..c15bb017d3 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.format() +title: Intl.ListFormat.prototype.format() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format tags: - Internationalisation diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md index 2730cf774b..60ee95e7cf 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.formatToParts() +title: Intl.ListFormat.prototype.formatToParts() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts tags: - Internationalisation diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md index af5f79508d..76e33095f8 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md @@ -24,10 +24,10 @@ L'objet **`Intl.ListFormat`** est un constructeur d'objets qui permettent de for ### Paramètres - `locales`{{optional_inline}} - - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. + - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. - `options`{{optional_inline}} - - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : + - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}. diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md index 8262926d17..dab437ab96 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.resolvedOptions() +title: Intl.ListFormat.prototype.resolvedOptions() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions tags: - Internationalisation @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedO --- {{JSRef}}{{Draft}} -La méthode **`Intl.ListFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}. +La méthode **`Intl.ListFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}. ## Syntaxe diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md index ae6a5c4f24..5b5fe80145 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md @@ -42,7 +42,7 @@ Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locale ### Utiliser `supportedLocalesOf` -Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. +Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. ```js const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; @@ -55,7 +55,7 @@ console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', ')); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.ListFormat.supportedLocalesOf`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf) | Proposition de niveau 3 | | +| [Proposition pour `Intl.ListFormat.supportedLocalesOf`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md index e9d990d117..6f1a50e79d 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md @@ -49,7 +49,7 @@ La propriété `calendar` renvoie la partie de la locale qui indique le calendri <tr> <td><code>ethioaa</code></td> <td> - Calendrier éthiopique, Amete Alem (an 0 situé environ à 5493 ans avant + Calendrier éthiopique, Amete Alem (an 0 situé environ à 5493 ans avant notre ère) </td> </tr> @@ -121,7 +121,7 @@ La propriété `calendar` renvoie la partie de la locale qui indique le calendri <td> <div class="warning"> <p> - <strong>Attention :</strong> La clé <code>islamicc</code> est + <strong>Attention :</strong> La clé <code>islamicc</code> est désormais dépréciée et il faut utiliser <code>islamic-civil</code> à la place. </p> diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md index f125b58901..b59e36cdf6 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md @@ -26,7 +26,7 @@ Une instance {{jsxref("Locale", "Locale")}} dont la propriété `baseName` renvo ## Description -Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue `"en"`, l'algorithme renverra `"en-Latn-US"`, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode `maximize()` n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après `"-u"` (dont [`Locale.hourCycle`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle "The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."), [`Locale.calendar`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar "The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale.") et [`Locale.numeric`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric "The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters.") entre autres). +Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue `"en"`, l'algorithme renverra `"en-Latn-US"`, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode `maximize()` n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après `"-u"` (dont [`Locale.hourCycle`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle "The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."), [`Locale.calendar`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar "The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale.") et [`Locale.numeric`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric "The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters.") entre autres). ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md index bac7a3220c..4b542d2ddf 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md @@ -30,7 +30,7 @@ La méthode **`Intl.NumberFormat.prototype.format()`** formate un nombre en fonc ## Description -La fonction d'accesseur `format` permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. +La fonction d'accesseur `format` permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. ## Exemples @@ -42,12 +42,12 @@ On peut utiliser la fonction renvoyée par `format` pour formater une valeur mon var options = {style: "currency", currency: "RUB"}; var numberFormat = new Intl.NumberFormat("ru-RU", options); console.log(numberFormat.format(654321.987)); -// → "654 321,99 руб." +// → "654 321,99 руб." ``` ### Utiliser `format()` avec `map()` -On peut également utiliser la fonction `format` pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet `NumberFormat` dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}. +On peut également utiliser la fonction `format` pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet `NumberFormat` dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}. ```js var a = [123456.789, 987654.321, 456789.123]; @@ -62,8 +62,8 @@ console.log(formatted.join("; ")); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | | {{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 1.0')}} | Définition initiale | -| {{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md index 66f86323c6..9ec1c3e793 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md @@ -44,7 +44,7 @@ La méthode `formatToParts()` est peut être utilisée lorsqu'on met en forme de Les valeurs possibles pour l'attribut `type` sont : - `currency` - - : Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont `currencyDisplay` est indiquée. + - : Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont `currencyDisplay` est indiquée. - `decimal` - : Le séparateur décimal utilisé ("."). - `fraction` diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md index 248d95d5ed..5f349a0fca 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md @@ -25,14 +25,14 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `locales` - - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées : + - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées : - nu - : Le système numérique à utiliser. Parmi les valeurs possibles, on a : `"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".` - `options` - - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : + - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}. @@ -41,7 +41,7 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `currency` - : La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que `"USD"` pour le dollar américain, `"EUR"` pour l'euro, ou `"CNY"` pour le yuan chinois. Voir la page listant [les codes actuels pour les devises et les fonds](http://www.currency-iso.org/en/home/tables/table-a1.html) (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option `style` est "currency", la propriété `currency` doit être définie. - `currencyDisplay` - - : La façon d'afficher la devise dans le format courant. Les valeurs possibles sont `"symbol"` qui permet d'utiliser un symbole localisé comme '€', `"code"` qui affichera le code ISO de la devise (voir ci-avant), `"name"` affichera un nom localisé pour la devise comme `"dollar"`. La valeur par défaut est `"symbol"`. + - : La façon d'afficher la devise dans le format courant. Les valeurs possibles sont `"symbol"` qui permet d'utiliser un symbole localisé comme '€', `"code"` qui affichera le code ISO de la devise (voir ci-avant), `"name"` affichera un nom localisé pour la devise comme `"dollar"`. La valeur par défaut est `"symbol"`. - `useGrouping` - : Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont `true` et `false`. La valeur par défaut `true`. @@ -52,7 +52,7 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `minimumFractionDigits` - : Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats `"decimal"` et `"percent"`, la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire (`"currency"`) correspond au nombre de chiffres défini par [la liste de codes de devises ISO 4217](https://www.currency-iso.org/en/home/tables/table-a1.html), si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres. - `maximumFractionDigits` - - : Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format `"decimal"`, la valeur par défaut est le maximum entre 3 et `minimumFractionDigits`. Pour le format monétaire (`"currency"`), la valeur par défaut est le maximum entre `minimumFractionDigits` et le nombre de chiffres prévus par la liste [ISO 4217 des codes de devises](https://www.currency-iso.org/en/home/tables/table-a1.html) (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre `minimumFractionDigits` et 0. + - : Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format `"decimal"`, la valeur par défaut est le maximum entre 3 et `minimumFractionDigits`. Pour le format monétaire (`"currency"`), la valeur par défaut est le maximum entre `minimumFractionDigits` et le nombre de chiffres prévus par la liste [ISO 4217 des codes de devises](https://www.currency-iso.org/en/home/tables/table-a1.html) (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre `minimumFractionDigits` et 0. - `minimumSignificantDigits` - : Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1. - `maximumSignificantDigits` @@ -139,7 +139,7 @@ var nombre = 123456.789; // on affiche une devise avec le style "currency" console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre)); -// → 123.456,79 € +// → 123.456,79 € // Le yen japonais n'a pas de centimes console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre)) @@ -155,8 +155,8 @@ console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md index 84d7961afb..14c47ace19 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md @@ -25,7 +25,7 @@ La méthode **`Intl.NumberFormat.prototype.resolvedOptions()`** renvoie un nouve ### Valeur de retour -Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. +Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. ## Description @@ -69,8 +69,8 @@ usedOptions.useGrouping; // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md index 0e53d66889..84a83dfd5d 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md @@ -59,8 +59,8 @@ console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", ")); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | | {{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale | -| {{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md index 3f1e19cee0..e415adbd83 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md @@ -76,7 +76,7 @@ rtf.format(1, "day"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md index be57f9e3d3..a126f37e74 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md @@ -56,7 +56,7 @@ rtf.formatToParts(100, "day"); | Spécifications | État | Commentaires | | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md index 85bfd8665a..8049ee3477 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md @@ -31,9 +31,9 @@ L'objet **`Intl.RelativeTimeFormat`** est un constructeur fournissant des objets - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}. - `numeric` - - : Le format du message de sortie. Les valeurs possibles sont `"always"` (par exemple `1 day ago`) ou `"auto"` (par exemple `yesterday`). `"auto"` permet de ne pas toujours avoir de valeurs numériques dans le message produit. + - : Le format du message de sortie. Les valeurs possibles sont `"always"` (par exemple `1 day ago`) ou `"auto"` (par exemple `yesterday`). `"auto"` permet de ne pas toujours avoir de valeurs numériques dans le message produit. - `style` - - : La longueur du message internationalisé. Les valeurs possibles sont : `"long"` (la valeur par défaut) (par exemple : `in 1 month`), `"short"` (par exemple : `in 1 mo.`) ou `"narrow"` (par exemple : `in 1 mo.`). Le style `narrow` peut être semblable au style `short` pour certaines locales. + - : La longueur du message internationalisé. Les valeurs possibles sont : `"long"` (la valeur par défaut) (par exemple : `in 1 month`), `"short"` (par exemple : `in 1 mo.`) ou `"narrow"` (par exemple : `in 1 mo.`). Le style `narrow` peut être semblable au style `short` pour certaines locales. ## Description diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md index daa3fcb143..187d766d53 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md @@ -27,7 +27,7 @@ La méthode **`Intl.RelativeTimeFormat.prototype.resolvedOptions()`** renvoie un ### Valeur de retour -Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}. +Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}. ## Description @@ -47,7 +47,7 @@ L'objet renvoyé par cette méthode possèdera les propriétés suivantes : - : Le format du message produit. Les valeurs possibles sont : - - `"always"` : la valeur par défaut (par exemple `1 day ago`), + - `"always"` : la valeur par défaut (par exemple `1 day ago`), - `"auto"` : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple `yesterday`). - `numberingSystem` @@ -70,7 +70,7 @@ usedOptions.numberingSystem; // "latn" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | | | | | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md index 261968f2ba..9538189e13 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md @@ -54,7 +54,7 @@ Si on dispose d'un environnement qui supporte les locales indonésienne et allem | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/isfinite/index.md index 2bfa521574..28b6bb4862 100644 --- a/files/fr/web/javascript/reference/global_objects/isfinite/index.md +++ b/files/fr/web/javascript/reference/global_objects/isfinite/index.md @@ -56,9 +56,9 @@ isFinite("0"); // true ce qui aurait été false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/isnan/index.md b/files/fr/web/javascript/reference/global_objects/isnan/index.md index acc31bfd71..6920196bd5 100644 --- a/files/fr/web/javascript/reference/global_objects/isnan/index.md +++ b/files/fr/web/javascript/reference/global_objects/isnan/index.md @@ -119,9 +119,9 @@ isNaN("blabla") // true : "blabla" est converti en un nombre | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/json/index.md b/files/fr/web/javascript/reference/global_objects/json/index.md index ac25b46a6b..99ab4c7f5a 100644 --- a/files/fr/web/javascript/reference/global_objects/json/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/index.md @@ -116,6 +116,6 @@ Des espaces blancs insignifiants peuvent être présents n’importe où sauf da - [JSON Compare](http://jsoncompare.org/) qui permet de comparer deux JSON - [JSON Beautifier](http://jsonbeautifier.org/) qui permet de visualiser et d'éditer un fichier JSON - - [JSON Parser](https://jsonparser.org/) qui permet de formatter une chaîne JSON - - [JSON Formatter](https://extendsclass.com/json-validator.html) qui permet de formatter et échapper une chaîne JSON - - [JSON Validator](https://tools.learningcontainer.com/json-validator/) qui permet de valider une chaîne JSON + - [JSON Parser](https://jsonparser.org/) qui permet de formatter une chaîne JSON + - [JSON Formatter](https://extendsclass.com/json-validator.html) qui permet de formatter et échapper une chaîne JSON + - [JSON Validator](https://tools.learningcontainer.com/json-validator/) qui permet de valider une chaîne JSON diff --git a/files/fr/web/javascript/reference/global_objects/json/parse/index.md b/files/fr/web/javascript/reference/global_objects/json/parse/index.md index 723c68223b..adf5547f16 100644 --- a/files/fr/web/javascript/reference/global_objects/json/parse/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/parse/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse --- {{JSRef}} -La méthode **`JSON.parse()`** analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé. +La méthode **`JSON.parse()`** analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé. {{EmbedInteractiveExample("pages/js/json-parse.html")}} @@ -51,7 +51,7 @@ try { } ``` -### Utiliser le paramètre `reviver` +### Utiliser le paramètre `reviver` Si un _reviver_ est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au _reviver_, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction _reviver_ retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée. diff --git a/files/fr/web/javascript/reference/global_objects/json/stringify/index.md b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md index 1232bddcc2..e21550e97a 100644 --- a/files/fr/web/javascript/reference/global_objects/json/stringify/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md @@ -48,7 +48,7 @@ Une chaîne de caractères JSON qui représente la valeur indiquée. La fonction `JSON.stringify()` convertit un objet en JSON : - L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté. -- Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle. +- Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle. - Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). `JSON.stringify()` peut également renvoyer `undefined` lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple `JSON.stringify(function(){})` ou `JSON.stringify(undefined)`. - Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction `remplaçant` est utilisée. - Les propriétés qui ne sont pas énumérables seront ignorées. @@ -183,7 +183,7 @@ L'argument `espace` est utilisé pour contrôler les espacements utilisés dans ```js JSON.stringify({ a: 2 }, null, ' '); // '{ -// "a": 2 +// "a": 2 // }' ``` @@ -193,8 +193,8 @@ Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); // renverra // '{ -// "uno": 1, -// "dos": 2 +// "uno": 1, +// "dos": 2 // }' ``` diff --git a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md index a971dab13c..1e19470b6b 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md @@ -61,7 +61,7 @@ for (var v of maMap) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/@@species/index.md b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md index 69c46bb86c..50ba9741d9 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md @@ -45,7 +45,7 @@ class MaMap extends Map { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md index 0618585f04..4eacf94483 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md @@ -32,7 +32,7 @@ Object.prototype.toString.call(new Map()) // "[object Map]" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/clear/index.md b/files/fr/web/javascript/reference/global_objects/map/clear/index.md index 7eb0c53805..d53f651c14 100644 --- a/files/fr/web/javascript/reference/global_objects/map/clear/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/clear/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear --- {{JSRef}} -La méthode **`clear()`** supprime tous les éléments d'un objet `Map`. +La méthode **`clear()`** supprime tous les éléments d'un objet `Map`. {{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/map/delete/index.md b/files/fr/web/javascript/reference/global_objects/map/delete/index.md index 0e8aa9ecf5..6ccec495ca 100644 --- a/files/fr/web/javascript/reference/global_objects/map/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/delete/index.md @@ -45,7 +45,7 @@ maMap.has("truc"); // Renvoie false. "truc" n'est plus présent. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/entries/index.md b/files/fr/web/javascript/reference/global_objects/map/entries/index.md index a03e8f96c4..843b4eeb8f 100644 --- a/files/fr/web/javascript/reference/global_objects/map/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/entries/index.md @@ -48,7 +48,7 @@ console.log(mapIter.next().value); // [Object, "bidule"] | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ES2015')}} | Défintion initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/has/index.md b/files/fr/web/javascript/reference/global_objects/map/has/index.md index 998b7fe3bc..295f9cab6f 100644 --- a/files/fr/web/javascript/reference/global_objects/map/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/has/index.md @@ -45,7 +45,7 @@ maMap.has("machin");// renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/index.md b/files/fr/web/javascript/reference/global_objects/map/index.md index 8cb0561cdd..6829c8d088 100644 --- a/files/fr/web/javascript/reference/global_objects/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Map --- {{JSRef}} -L'objet **`Map`** représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur. +L'objet **`Map`** représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur. L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les `Map` parcourent les clés dans cet ordre. @@ -35,7 +35,7 @@ On notera qu'un objet `Map` contenant des objets ne sera parcouru que dans l'ord L'égalité des clés est testée avec l'algorithme basé sur [l'égalité de valeurs](/fr/docs/JavaScript/Les_différents_tests_d_Égalité_comment_les_utiliser#.C3.89galit.C3.A9_de_valeurs) : - {{jsxref("NaN")}} est considéré égal à `NaN` (bien que, pour l'égalité stricte `NaN !== NaN`) -- les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur `===`). +- les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur `===`). Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) `-0` et `+0` étaient considérés différents (bien que `-0 === +0`), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de [Chrome](https://code.google.com/p/v8/issues/detail?id=3069). @@ -43,7 +43,7 @@ Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) `-0` et `+0 Les {{jsxref("Object", "objets","",1)}} sont similaires aux `Maps`, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des `Maps`. Malgré tout, il y a des différences importantes entre `Objects` et `Maps` qui permettent de distinguer une utilisation des objets `Map` plus efficace : -- Un `Object` possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire `map =` {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée. +- Un `Object` possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire `map =` {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée. - Les clés d'une `Map` sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une `Map`, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles. - Les clés d'un `Object` sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une `Map` ça peut être n'importe quelle valeur. - Il est possible d'obtenir facilement la taille d'une `Map` avec `size`. En revanche, pour un `Object` il faudra compter « manuellement ». diff --git a/files/fr/web/javascript/reference/global_objects/map/keys/index.md b/files/fr/web/javascript/reference/global_objects/map/keys/index.md index 94943f763b..0a84242f6a 100644 --- a/files/fr/web/javascript/reference/global_objects/map/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/keys/index.md @@ -47,7 +47,7 @@ console.log(mapIter.next().value); // Object | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.md b/files/fr/web/javascript/reference/global_objects/map/set/index.md index b25fc7c250..941226ce96 100644 --- a/files/fr/web/javascript/reference/global_objects/map/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.md @@ -64,7 +64,7 @@ maMap.set('truc', 'toto') | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/size/index.md b/files/fr/web/javascript/reference/global_objects/map/size/index.md index 898542a176..777209defc 100644 --- a/files/fr/web/javascript/reference/global_objects/map/size/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/size/index.md @@ -38,7 +38,7 @@ maMap.size // 3 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ESDraft')}} | | ## Compatibliité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/values/index.md b/files/fr/web/javascript/reference/global_objects/map/values/index.md index 07c000c242..7e29792a2c 100644 --- a/files/fr/web/javascript/reference/global_objects/map/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/values/index.md @@ -48,7 +48,7 @@ console.log(mapIter.next().value); // "licorne" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/abs/index.md b/files/fr/web/javascript/reference/global_objects/math/abs/index.md index 6a1a7d758d..168e36b168 100644 --- a/files/fr/web/javascript/reference/global_objects/math/abs/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/abs/index.md @@ -58,9 +58,9 @@ Math.abs(); // NaN | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/acos/index.md b/files/fr/web/javascript/reference/global_objects/math/acos/index.md index 2d120f115d..d8e762c169 100644 --- a/files/fr/web/javascript/reference/global_objects/math/acos/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/acos/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acos La fonction **`Math.acos()`** renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-acos.html")}} @@ -56,9 +56,9 @@ Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.ac | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/acosh/index.md b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md index cb4ff0b1c1..5b80b720f4 100644 --- a/files/fr/web/javascript/reference/global_objects/math/acosh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md @@ -64,7 +64,7 @@ function acosh(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/asin/index.md b/files/fr/web/javascript/reference/global_objects/math/asin/index.md index b7d502cfb9..71cbeb0beb 100644 --- a/files/fr/web/javascript/reference/global_objects/math/asin/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/asin/index.md @@ -56,9 +56,9 @@ Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.as | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/asinh/index.md b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md index 607a90d9f4..2c5f7d9ae8 100644 --- a/files/fr/web/javascript/reference/global_objects/math/asinh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md @@ -53,7 +53,7 @@ Math.asinh = Math.asinh || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/atan/index.md b/files/fr/web/javascript/reference/global_objects/math/atan/index.md index 3f9a23100f..10b8e3f580 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atan/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atan/index.md @@ -58,9 +58,9 @@ Math.atan(y / x); | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/atanh/index.md b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md index ce23e62351..0a0f59f908 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atanh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh La fonction **`Math.atanh()`** renvoie l'arc tangente hyperbolique d'un nombre : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext> tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext> tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-atanh.html")}} @@ -48,7 +48,7 @@ Math.atanh(1); // Infinity Math.atanh(2); // NaN ``` -Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé. +Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé. ## Prothèse d'émulation (_polyfill_) @@ -65,7 +65,7 @@ Math.atanh = Math.atanh || function(x) { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md index 8fe0f00c04..2ca11def51 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md @@ -49,7 +49,7 @@ Math.cbrt(0); // 0 Math.cbrt(1); // 1 Math.cbrt(Infinity); // Infinity Math.cbrt(null); // 0 -Math.cbrt(2); // 1.2599210498948732 +Math.cbrt(2); // 1.2599210498948732 ``` ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/math/ceil/index.md b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md index fced464d1b..74fd1e4c23 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ceil/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md @@ -44,8 +44,8 @@ Voici un exemple d'utilisation de `Math.ceil()`. Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 -Math.ceil(-0.95); // -0 -Math.ceil(-4); // -4 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 Math.ceil(null); // 0 ``` diff --git a/files/fr/web/javascript/reference/global_objects/math/clz32/index.md b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md index 416bc22e28..29b54cfa40 100644 --- a/files/fr/web/javascript/reference/global_objects/math/clz32/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32 --- {{JSRef}} -La fonction **`Math.clz32()`** renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre. +La fonction **`Math.clz32()`** renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre. {{EmbedInteractiveExample("pages/js/math-clz32.html")}} @@ -32,13 +32,13 @@ Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du ## Description -"`clz32`" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »). +"`clz32`" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »). Si `x` n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits. Si l'entier non signé sur 32 bits résultant vaut `0`, la fonction renverra `32`, car tous les bits valent `0`. -Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme [Emscripten](/fr/docs/Emscripten). +Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme [Emscripten](/fr/docs/Emscripten). ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/math/cos/index.md b/files/fr/web/javascript/reference/global_objects/math/cos/index.md index 9b78bfd357..fe54893d54 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cos/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cos/index.md @@ -51,9 +51,9 @@ Math.cos(2 * Math.PI); // 1 | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/cosh/index.md b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md index d0306213b6..4f50f9ad7a 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cosh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md @@ -72,7 +72,7 @@ Math.cosh = Math.cosh || function(x) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/e/index.md b/files/fr/web/javascript/reference/global_objects/math/e/index.md index 540d7769eb..34d1219ba8 100644 --- a/files/fr/web/javascript/reference/global_objects/math/e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/e/index.md @@ -40,9 +40,9 @@ getNapier(); // 2.718281828459045 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.e', 'Math.E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.e', 'Math.E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/exp/index.md b/files/fr/web/javascript/reference/global_objects/math/exp/index.md index e6be9fc5c3..25f8121332 100644 --- a/files/fr/web/javascript/reference/global_objects/math/exp/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/exp/index.md @@ -30,7 +30,7 @@ L'exponentielle du nombre passé en argument (`e^x`). ## Description -`exp()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.exp()`, elle ne doit pas être utilisée avec un objet qui aurait été créé (`Math` n'est pas un constructeur). +`exp()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.exp()`, elle ne doit pas être utilisée avec un objet qui aurait été créé (`Math` n'est pas un constructeur). ## Exemples @@ -47,9 +47,9 @@ Math.exp(1); // 2.718281828459045 | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/expm1/index.md b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md index c2e5287fc2..cd50834f7d 100644 --- a/files/fr/web/javascript/reference/global_objects/math/expm1/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md @@ -59,7 +59,7 @@ Math.expm1 = Math.expm1 || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/floor/index.md b/files/fr/web/javascript/reference/global_objects/math/floor/index.md index 65bc3d23fc..99d68bc66e 100644 --- a/files/fr/web/javascript/reference/global_objects/math/floor/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/floor/index.md @@ -30,7 +30,7 @@ Un nombre qui représente le plus grand entier inférieur ou égal à la valeur ## Description -`floor()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.floor()`, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (`Math` n'est pas un constructeur). +`floor()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.floor()`, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (`Math` n'est pas un constructeur). > **Note :** `Math.floor(null)` renvoie `0` et pas {{jsxref("NaN")}}. diff --git a/files/fr/web/javascript/reference/global_objects/math/hypot/index.md b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md index 977f6c4965..ae29a8b000 100644 --- a/files/fr/web/javascript/reference/global_objects/math/hypot/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md @@ -97,7 +97,7 @@ Math.hypot = function (x, y) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/imul/index.md b/files/fr/web/javascript/reference/global_objects/math/imul/index.md index 1ac54c7e56..86ef45ec0e 100644 --- a/files/fr/web/javascript/reference/global_objects/math/imul/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/imul/index.md @@ -68,7 +68,7 @@ Math.imul = Math.imul || function(a, b) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/ln10/index.md b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md index 2dc07d7187..12f215b635 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ln10/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md @@ -40,9 +40,9 @@ getNatLog10(); // 2.302585092994046 | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/ln2/index.md b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md index 25019b09ca..1e5f314ee2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ln2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md @@ -40,9 +40,9 @@ getLog2(256); // 8 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log/index.md b/files/fr/web/javascript/reference/global_objects/math/log/index.md index 14c55bd91d..1870e47f9f 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log/index.md @@ -34,7 +34,7 @@ Le logarithme naturelle de la valeur passée en argument. Si cette valeur est n Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est `0`, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}. -`log()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.log()`, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}. +`log()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.log()`, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/math/log10/index.md b/files/fr/web/javascript/reference/global_objects/math/log10/index.md index 763738f700..f2b8e8d2c9 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log10/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log10/index.md @@ -15,7 +15,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log10 La fonction **`Math.log10()`** renvoie le logarithme en base 10 d'un nombre, donné par la formule : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-log10.html")}} @@ -65,7 +65,7 @@ Math.log10 = Math.log10 || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log10e/index.md b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md index 05f9f01a3a..c15624f4d2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log10e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md @@ -40,9 +40,9 @@ getLog10e(); // 0.4342944819032518 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log1p/index.md b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md index 1ca30ae91d..f4c65703e0 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log1p/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md @@ -64,7 +64,7 @@ Math.log1p = Math.log1p || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log2e/index.md b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md index 6f986e4bf3..2f43747151 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log2e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md @@ -40,9 +40,9 @@ getLog2e(); // 1.4426950408889634 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/max/index.md b/files/fr/web/javascript/reference/global_objects/math/max/index.md index ceae8a1e98..b44bf6fdc4 100644 --- a/files/fr/web/javascript/reference/global_objects/math/max/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/max/index.md @@ -79,9 +79,9 @@ Attention avec la décomposition et `apply()` qui pourront échouer s'il y a tro | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.max', 'Math.max')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.max', 'Math.max')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.max', 'Math.max')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.max', 'Math.max')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/min/index.md b/files/fr/web/javascript/reference/global_objects/math/min/index.md index 0fa9c67c58..fc14e057f6 100644 --- a/files/fr/web/javascript/reference/global_objects/math/min/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/min/index.md @@ -72,9 +72,9 @@ var x = Math.min(f(toto), limite); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.min', 'Math.min')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.min', 'Math.min')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/pi/index.md b/files/fr/web/javascript/reference/global_objects/math/pi/index.md index d8f6d65a4a..1cc7bba4fb 100644 --- a/files/fr/web/javascript/reference/global_objects/math/pi/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/pi/index.md @@ -40,9 +40,9 @@ calculPérimètre(1); // 6.283185307179586 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sin/index.md b/files/fr/web/javascript/reference/global_objects/math/sin/index.md index 35bb474eef..f0a9ffae38 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sin/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sin/index.md @@ -48,9 +48,9 @@ Math.sin(Math.PI / 2); // 1 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sinh/index.md b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md index 67abde0021..91c4fdaffc 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sinh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md @@ -67,7 +67,7 @@ Math.sinh = Math.sinh || function(x){ | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md index 8af569dd19..9a76275685 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt --- {{JSRef}} -La fonction **`Math.sqrt()`** renvoie la racine carrée d'un nombre. Cette fonction est définie par : +La fonction **`Math.sqrt()`** renvoie la racine carrée d'un nombre. Cette fonction est définie par : <math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>l'unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math> @@ -53,9 +53,9 @@ Math.sqrt(-0); // -0 | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md index 2af49cd3ca..2efa5711a5 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md @@ -38,9 +38,9 @@ getRoot1_2(); // 0.7071067811865476 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md index a9ba6b6994..5c6ccd6ce2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md @@ -38,9 +38,9 @@ getRoot2(); // 1.4142135623730951 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/tan/index.md b/files/fr/web/javascript/reference/global_objects/math/tan/index.md index 12b35857d3..cfb20906ad 100644 --- a/files/fr/web/javascript/reference/global_objects/math/tan/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/tan/index.md @@ -56,9 +56,9 @@ function getTanDeg(deg) { | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/tanh/index.md b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md index b6dccc2b4f..2462942aac 100644 --- a/files/fr/web/javascript/reference/global_objects/math/tanh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh --- {{JSRef}} -La fonction **`Math.tanh()`** renvoie la tangente hyperbolique d'un nombre définie par : +La fonction **`Math.tanh()`** renvoie la tangente hyperbolique d'un nombre définie par : <math><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math> @@ -52,8 +52,8 @@ Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globau ```js Math.tanh = Math.tanh || function(x){ - var a = Math.exp(+x), b = Math.exp(-x); - return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); + var a = Math.exp(+x), b = Math.exp(-x); + return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); } ``` @@ -77,7 +77,7 @@ Math.tanhx = Math.tanhx || function(x) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/nan/index.md b/files/fr/web/javascript/reference/global_objects/nan/index.md index 0fee579a76..1521227f89 100644 --- a/files/fr/web/javascript/reference/global_objects/nan/index.md +++ b/files/fr/web/javascript/reference/global_objects/nan/index.md @@ -51,9 +51,9 @@ Number.isNaN('coucou monde'); // renvoie false | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/null/index.md b/files/fr/web/javascript/reference/global_objects/null/index.md index 265e06cd86..39693a1ed2 100644 --- a/files/fr/web/javascript/reference/global_objects/null/index.md +++ b/files/fr/web/javascript/reference/global_objects/null/index.md @@ -52,9 +52,9 @@ isNaN(1 + undefined); // true | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-4.3.11', 'null value')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-null-value', 'null value')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-null-value', 'null value')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-4.3.11', 'null value')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-null-value', 'null value')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-null-value', 'null value')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md index cc86d668c0..f8a3a4877a 100644 --- a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md @@ -46,7 +46,7 @@ if (Number.EPSILON === undefined) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/index.md b/files/fr/web/javascript/reference/global_objects/number/index.md index 7a8b76b86a..6bef334a8e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/index.md @@ -74,22 +74,22 @@ L'objet `Number` est principalement utilisé dans les cas de figure suivants : ## Les instances de `Number` -Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`. +Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`. ### Méthodes - {{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}} - - : Retourne une chaîne représentant le nombre en notation exponentielle. + - : Retourne une chaîne représentant le nombre en notation exponentielle. - {{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}} - - : Retourne une chaîne représentant le nombre avec la notation virgule fixe. -- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}} - - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}. + - : Retourne une chaîne représentant le nombre avec la notation virgule fixe. +- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}} + - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}. - {{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}} - : Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle. - {{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}} - - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}. + - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}. - {{jsxref("Number.prototype.valueOf()")}} - - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}. + - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md index f348bbf6dc..04cd687d02 100644 --- a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md @@ -32,7 +32,7 @@ Un booléen indiquant si la valeur passée en argument est un nombre fini. ## Description -Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction `Number.isFinite` ne convertit pas l'argument et ne renvoie pas `true`. +Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction `Number.isFinite` ne convertit pas l'argument et ne renvoie pas `true`. ## Exemples @@ -76,7 +76,7 @@ Deuxième version plus concise qui utilise la méthode globale `isFinite` ```js if (Number.isFinite === undefined) Number.isFinite = function(value) { - return typeof value === "number" && isFinite(value); + return typeof value === "number" && isFinite(value); } ``` diff --git a/files/fr/web/javascript/reference/global_objects/number/isnan/index.md b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md index fef4caa264..9ee91725b9 100644 --- a/files/fr/web/javascript/reference/global_objects/number/isnan/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md @@ -33,7 +33,7 @@ Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}. Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient `false` pour vérifier que {{jsxref("NaN")}} _est_ NaN. La fonction `Number.isNaN` est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript. -En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre. `Number.isNaN` ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent `NaN`, elle renverra `true`. +En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre. `Number.isNaN` ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent `NaN`, elle renverra `true`. ## Exemples @@ -73,7 +73,7 @@ Number.isNaN = Number.isNaN || function(value) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs @@ -82,5 +82,5 @@ Number.isNaN = Number.isNaN || function(value) { ## Voir aussi - L'objet {{jsxref("Number")}} auquel appartient cette méthode. -- La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur +- La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur - La méthode {{jsxref("isNaN")}} de l'objet global diff --git a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md index 4958589300..b1af8fb761 100644 --- a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md @@ -39,7 +39,7 @@ Un entier correctement représentable en JavaScript : - peut exactement être représenté avec un nombre à précision double selon IEEE-754 - la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754. -Ainsi, par exemple, `2^53 - 1` peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, `2^53` ne peut pas être représenté correctement car `2^53 + 1` sera arrondi en `2^53` selon les règles IEEE-754 (arrondi à l'entier le plus proche). +Ainsi, par exemple, `2^53 - 1` peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, `2^53` ne peut pas être représenté correctement car `2^53 + 1` sera arrondi en `2^53` selon les règles IEEE-754 (arrondi à l'entier le plus proche). L'intervalle des entiers qui peuvent être correctement représentés est `[-(2^53 - 1),2^53 - 1` ]. diff --git a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md index 893e816edf..ff1eb4217b 100644 --- a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md @@ -26,7 +26,7 @@ La constante `MAX_SAFE_INTEGER` a une valeur de `9007199254740991`. Cette valeur Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` vaudra `true` ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}. -`MAX_SAFE_INTEGER` est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme `Number.MAX_SAFE_INTEGER` et non pas comme la propriété d'un objet `Number` qui aurait été instancié. +`MAX_SAFE_INTEGER` est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme `Number.MAX_SAFE_INTEGER` et non pas comme la propriété d'un objet `Number` qui aurait été instancié. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/number/max_value/index.md b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md index b910228801..f280b9961c 100644 --- a/files/fr/web/javascript/reference/global_objects/number/max_value/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md @@ -38,9 +38,9 @@ if (num1 * num2 <= Number.MAX_VALUE) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/min_value/index.md b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md index 6862f18313..3841bc974e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/min_value/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md @@ -21,7 +21,7 @@ La propriété `MIN_VALUE` représente le nombre positif le plus proche de 0 et `MIN_VALUE` vaut environ 5e-324. Les valeurs inférieures à `MIN_VALUE` sont converties en 0. -`MIN_VALUE` est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe `Number.MIN_VALUE`, et non pas via la propriété d'un objet `Number` qui aurait été instancié. +`MIN_VALUE` est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe `Number.MIN_VALUE`, et non pas via la propriété d'un objet `Number` qui aurait été instancié. ## Exemples @@ -40,9 +40,9 @@ if (num1 / num2 >= Number.MIN_VALUE) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/nan/index.md b/files/fr/web/javascript/reference/global_objects/number/nan/index.md index edd02e3b02..ba49a93ba6 100644 --- a/files/fr/web/javascript/reference/global_objects/number/nan/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/nan/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN --- {{JSRef}} -La propriété **`Number.NaN`** représente une valeur qui n'est pas un nombre (en anglais « *Not-A-Number* » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}. +La propriété **`Number.NaN`** représente une valeur qui n'est pas un nombre (en anglais « *Not-A-Number* » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}. {{EmbedInteractiveExample("pages/js/number-nan.html")}} @@ -24,9 +24,9 @@ Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs @@ -34,5 +34,5 @@ Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder ## Voir aussi -- L'objet global {{jsxref("NaN")}} ; +- L'objet global {{jsxref("NaN")}} ; - L'objet {{jsxref("Number")}} auquel appartient cette propriété. diff --git a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md index 0bd45fa9ba..9d79ffd882 100644 --- a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md @@ -25,8 +25,8 @@ Cette valeur se comporte différemment de l'infini mathématique : - Toute valeur négative, y compris `NEGATIVE_INFINITY`, multipliée par `NEGATIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. - Zéro multiplié par `NEGATIVE_INFINITY` sera égal à {{jsxref("NaN")}}. - NaN multiplié par `NEGATIVE_INFINITY` sera égal à `NaN`. -- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de `NEGATIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`. -- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur positive à l'exception de `POSITIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`. +- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de `NEGATIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`. +- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur positive à l'exception de `POSITIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`. - `NEGATIVE_INFINITY`, divisé par `NEGATIVE_INFINITY` ou `POSITIVE_INFINITY`, sera égal à `NaN`. - Tout nombre positif divisé par `NEGATIVE_INFINITY` sera égal au zéro négatif. - Tout nombre négatif divisé par `NEGATIVE_INFINITY` sera égal au zéro positif. @@ -52,9 +52,9 @@ if (petitNombre === Number.NEGATIVE_INFINITY) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md index c0b1031793..092a708dd0 100644 --- a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md @@ -27,7 +27,7 @@ La méthode **`Number.parseFloat()`** analyse et convertit une chaîne de caract ### Valeur de retour -Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la valeur {{jsxref("NaN")}} sera renvoyée. +Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la valeur {{jsxref("NaN")}} sera renvoyée. ## Description @@ -50,7 +50,7 @@ if (Number.parseFloat === undefined) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/parseint/index.md b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md index e77f8baff6..13c2609fb5 100644 --- a/files/fr/web/javascript/reference/global_objects/number/parseint/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md @@ -54,7 +54,7 @@ if(Number.parseInt === undefined) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md index 066c2ad931..4de465854b 100644 --- a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md @@ -23,7 +23,7 @@ La valeur de `Number.POSITIVE_INFINITY` est identique à la valeur de la propri Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique : -- Tout valeur positive, y compris `POSITIVE_INFINITY,` multipliée par `POSITIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. +- Tout valeur positive, y compris `POSITIVE_INFINITY,` multipliée par `POSITIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. - Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par `POSITIVE_INFINITY` sera égale à `NEGATIVE_INFINITY`. - Zéro multiplié par `POSITIVE_INFINITY` sera égal à {{jsxref("NaN")}}. - NaN multiplié par `POSITIVE_INFINITY` sera égal à NaN. @@ -55,9 +55,9 @@ if (grosNombre == Number.POSITIVE_INFINITY) { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md index e8c2e99bfe..8506a8686e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md @@ -32,7 +32,7 @@ Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation expo ### Exceptions - {{jsxref("RangeError")}} - - : Cette exception est causée si `nbChiffresDécimaux` est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes. + - : Cette exception est causée si `nbChiffresDécimaux` est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes. - {{jsxref("TypeError")}} - : Si cette méthode est invoquée pour un objet qui n'est pas un objet `Number`. @@ -42,7 +42,7 @@ La valeur renvoyée est une chaîne de caractères correspondant à la représen Si la méthode `toExponential()` est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal. -Si un nombre possède plus de chiffres décimaux que `nbChiffresDécimaux`, le nombre est arrondi au nombre le plus proche, représenté avec `nbChiffresDécimaux` pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour `toExponential()`. +Si un nombre possède plus de chiffres décimaux que `nbChiffresDécimaux`, le nombre est arrondi au nombre le plus proche, représenté avec `nbChiffresDécimaux` pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour `toExponential()`. ## Exemples @@ -63,9 +63,9 @@ console.log(77 .toExponential()); // affiche 7.7e+1 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md index 356025f244..a1462bdf2f 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md @@ -32,13 +32,13 @@ Une chaîne de caractères qui représente le nombre indiqué avec une notation ### Exceptions causées - {{jsxref("RangeError")}} - - : Cette exception est renvoyée si `nbChiffres` est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de `RangeError`. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes. + - : Cette exception est renvoyée si `nbChiffres` est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de `RangeError`. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes. - {{jsxref("TypeError")}} - : Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique. ## Description -`toFixed()` renvoie une chaîne de caractères représentant `objetNumber` sans notation exponentielle et qui possède exactement `nbChiffres` pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le `objetNumber` est supérieur ou égal à `1e+21`, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle. +`toFixed()` renvoie une chaîne de caractères représentant `objetNumber` sans notation exponentielle et qui possède exactement `nbChiffres` pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le `objetNumber` est supérieur ou égal à `1e+21`, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle. > **Attention :** En raison du standard [IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754) qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme `0.1 + 0.2 === 0.3` qui renvoie `false`). @@ -65,9 +65,9 @@ numObj.toFixed(6); // Renvoie '12345.678900' : des zéros sont ajoutés | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md index 9ff73fe256..a2a9a251d6 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md @@ -28,7 +28,7 @@ Les arguments `locales` et `options` permettent à l'application de spécifier l Voir la section [compatibilité des navigateurs](#compat "#Browser_Compatibility") afin de voir quels navigateurs supportent les arguments `locales` et `options`. L'exemple [Vérifier le support des arguments `locales` et `options`](#check) permet de détecter cette fonctionnalité. -> **Note :** L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument `locales` à la méthode [`Number.toLocaleString`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString). Si l'argument vaut `undefined`,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}). +> **Note :** L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument `locales` à la méthode [`Number.toLocaleString`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString). Si l'argument vaut `undefined`,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}). {{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}} @@ -58,7 +58,7 @@ function testSupporttoLocaleString() { try { nombre.toLocaleString("i"); } catch (e) { - return e.name === "RangeError"; + return e.name === "RangeError"; } return false; } @@ -116,7 +116,7 @@ var nombre = 123456.789; // on formate selon une devise console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"})); -// → 123.456,79 € +// → 123.456,79 € // le yen japonais ne possède pas de centimes console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"})) @@ -144,12 +144,12 @@ Lors du formatage de beaucoup de nombres, il est préférable de créer un objet | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 1.0')}} | | -| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 1.0')}} | | +| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md index fc528fd945..316a739959 100644 --- a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md @@ -61,9 +61,9 @@ console.log((1234.5).toPrecision(2)); // "1.2e+3" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tostring/index.md b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md index bf6933e12c..f1907b3e96 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md @@ -63,7 +63,7 @@ console.log(x.toString(2)); // affiche "110" console.log((254).toString(16)); // affiche "fe" -console.log((-10).toString(2)); // affiche "-1010" +console.log((-10).toString(2)); // affiche "-1010" console.log((-0xff).toString(2)); // affiche "-11111111" ``` @@ -72,9 +72,9 @@ console.log((-0xff).toString(2)); // affiche "-11111111" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/valueof/index.md b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md index 66b710fdce..08c71435fa 100644 --- a/files/fr/web/javascript/reference/global_objects/number/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md @@ -46,9 +46,9 @@ console.log(typeof num); // number | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/constructor/index.md b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md index e52db432fa..4e4010a177 100644 --- a/files/fr/web/javascript/reference/global_objects/object/constructor/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor --- {{JSRef}} -La propriété **`constructor`** renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme `1`, `true` et `"test"`. +La propriété **`constructor`** renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme `1`, `true` et `"test"`. ## Description @@ -119,7 +119,7 @@ function String() { ### Modifier le constructeur d'une fonction -La plupart du temps, cette propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec **`new`** et en « attachant » la chaîne de prototypes. +La plupart du temps, cette propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec **`new`** et en « attachant » la chaîne de prototypes. ```js function Parent() {} @@ -212,9 +212,9 @@ En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.md b/files/fr/web/javascript/reference/global_objects/object/create/index.md index 46985e3ff2..72c38a7159 100644 --- a/files/fr/web/javascript/reference/global_objects/object/create/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/create/index.md @@ -35,7 +35,7 @@ Un nouvel objet qui dispose du prototype et des propriétés indiquées. ### Exceptions -Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre `objetPropriétés` vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet. +Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre `objetPropriétés` vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet. ## Exemples @@ -97,7 +97,7 @@ MaClasse.prototype.maMéthode = function() { }; ``` -Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (`ClassParente2`) sur le prototype de la classe fille (`MaClasse`), les rendant disponibles pour toutes les instances de `MaClasse`. `Object.assign()` a été introduit avec ES2015 et [une prothèse d'émulation (polyfill)](</fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)>) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes [`jQuery.extend()`](https://api.jquery.com/jQuery.extend/) ou [`_.assign()`](https://lodash.com/docs/#assign) (Lodash) peuvent être utilisées. +Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (`ClassParente2`) sur le prototype de la classe fille (`MaClasse`), les rendant disponibles pour toutes les instances de `MaClasse`. `Object.assign()` a été introduit avec ES2015 et [une prothèse d'émulation (polyfill)](</fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)>) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes [`jQuery.extend()`](https://api.jquery.com/jQuery.extend/) ou [`_.assign()`](https://lodash.com/docs/#assign) (Lodash) peuvent être utilisées. ### Utiliser l'argument `objetPropriétés` avec `Object.create()` diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md index 9fc0554d96..c91a13fddf 100644 --- a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md @@ -62,7 +62,7 @@ L'objet passé à la fonction, éventuellement modifié. ## Description -`Object.defineProperties` permet principalement de définir toutes les propriétés de l'objet `obj` correspondant aux propriétés énumérable de `props`. +`Object.defineProperties` permet principalement de définir toutes les propriétés de l'objet `obj` correspondant aux propriétés énumérable de `props`. ## Exemples @@ -155,8 +155,8 @@ function defineProperties(obj, properties) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée par JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md index 9463de1f68..c4759631b6 100644 --- a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md @@ -161,7 +161,7 @@ Object.defineProperty(o, "conflit", { value: 0x9f91102, ### Modifier une propriété existante -Quand une propriété existe d'ores et déjà pour un objet, `Object.defineProperty()` tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait `configurable` à `false` (la propriété est dite non-configurable), aucun attribut, à l'exception de `writable`, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur. +Quand une propriété existe d'ores et déjà pour un objet, `Object.defineProperty()` tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait `configurable` à `false` (la propriété est dite non-configurable), aucun attribut, à l'exception de `writable`, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur. Si une propriété est non-configurable, son attribut `writable` ne peut être mis qu'à `false`. @@ -318,18 +318,18 @@ function Archiviste() { var température = null; var archive = []; - Object.defineProperty(this, "température",{ - get: function() { + Object.defineProperty(this, "température",{ + get: function() { console.log("accès !"); return température; }, - set: function(value) { + set: function(value) { température = value; archive.push({val: température}); } - }); + }); - this.getArchive = function() {return archive;}; + this.getArchive = function() {return archive;}; } var arc = new Archiviste(); @@ -384,11 +384,11 @@ arc.getArchive(); // [{val: 11}, {val: 13}] ### Redéfinir la propriété `length` d'un tableau (`Array`) -Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété `length` est initialement non-configurable, non-enumérable et accessible en écriture (`writable` vaut `true`)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété `length` ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition. +Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété `length` est initialement non-configurable, non-enumérable et accessible en écriture (`writable` vaut `true`)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété `length` ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition. Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété `length` d'un tableau. -Pour les versions de Chrome qui implémentent `Object.defineProperty()`, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de `length`. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture. +Pour les versions de Chrome qui implémentent `Object.defineProperty()`, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de `length`. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture. Pour les versions de Safari qui implémentent `Object.defineProperty()` elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée). diff --git a/files/fr/web/javascript/reference/global_objects/object/entries/index.md b/files/fr/web/javascript/reference/global_objects/object/entries/index.md index 7207bf85aa..fc0ce02fda 100644 --- a/files/fr/web/javascript/reference/global_objects/object/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/entries/index.md @@ -33,7 +33,7 @@ Un tableau qui contient les propriétés énumérables propres de l'objet sous l ## Description -`Object.entries()` renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments) `[clé, valeur]` qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement. +`Object.entries()` renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments) `[clé, valeur]` qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement. ## Exemples @@ -122,7 +122,7 @@ if (!Object.entries) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/freeze/index.md b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md index 4e90c7e363..0d5c52f5a7 100644 --- a/files/fr/web/javascript/reference/global_objects/object/freeze/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md @@ -73,7 +73,7 @@ function echec(){ obj.toto = "bipbip"; // renvoie une TypeError delete obj.toto; // renvoie une TypeError delete obj.roxor; // renvoie true car l'attribut n' a pas été ajouté - obj.bipbip = "arf"; // renvoie une TypeError + obj.bipbip = "arf"; // renvoie une TypeError } echec(); @@ -220,8 +220,8 @@ Lorsqu'on utilise la méthode `Object.freeze()`, les propriétés existantes d'u | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md index 57948e7202..fd2e4c0488 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md @@ -42,7 +42,7 @@ Un descripteur de propriété est un enregistrement qui dispose des attributs su - **`writable`** - : `true` si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement). - **`get`** - - : Une fonction qui joue le rôle d'accesseur (_getter_) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement). + - : Une fonction qui joue le rôle d'accesseur (_getter_) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement). - **`set`** - : Une fonction qui joue le rôle de mutateur (_setter_) pour la propriété ou `undefined` s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement). - **`configurable`** @@ -110,8 +110,8 @@ Object.getOwnPropertyDescriptor("toto", 0); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md index c28823f966..4fa24d2d43 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md @@ -84,7 +84,7 @@ subclass.prototype = Object.create( | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ES2017')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md index 6bfbc91edb..4da34506b5 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md @@ -73,7 +73,7 @@ console.log(Object.getOwnPropertyNames(mon_obj).sort()); // ["toto", "getToto"] ``` -Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}). +Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}). Les propriétés héritées via la chaîne de prototype ne sont pas listées : @@ -135,8 +135,8 @@ Object.getOwnPropertyNames('toto') | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md index 40d7d6558f..283d63f8a2 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md @@ -57,7 +57,7 @@ console.log(objectSymboles[0]) // Symbol(a) | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md index 595b3118e6..bb11df0792 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md @@ -53,8 +53,8 @@ Object.getPrototypeOf("toto"); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}} | {{Spec2('ES5.1')}} | Définition initiale | -| {{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md index 70feab462e..6522db0fbd 100644 --- a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty --- {{JSRef}} -La méthode **`hasOwnProperty()`** retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet. +La méthode **`hasOwnProperty()`** retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet. {{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}} @@ -35,9 +35,9 @@ Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode `hasOwnPro ## Exemples -### Utiliser `hasOwnProperty()` pour tester l'existence d'une propriété +### Utiliser `hasOwnProperty()` pour tester l'existence d'une propriété -L'exemple suivant détermine si l'objet `o` contient une propriété appelée `prop`: +L'exemple suivant détermine si l'objet `o` contient une propriété appelée `prop`: ```js o = new Object(); @@ -66,7 +66,7 @@ o.hasOwnProperty('hasOwnProperty'); ### Parcourir les propriétés d'un objet -L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que `hasOwnProperty()` est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) . +L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que `hasOwnProperty()` est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) . ```js var bidule = { diff --git a/files/fr/web/javascript/reference/global_objects/object/index.md b/files/fr/web/javascript/reference/global_objects/object/index.md index df266e33d6..52ac59562e 100644 --- a/files/fr/web/javascript/reference/global_objects/object/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object --- {{JSRef}} -Le constructeur **`Object`** crée un wrapper d'objet. +Le constructeur **`Object`** crée un wrapper d'objet. ## Syntaxe @@ -24,49 +24,49 @@ Le constructeur **`Object`** crée un wrapper d'objet. ### Paramètres - `paireNomValeur1, paireNomValeur2, ... paireNomValeurN` - - : Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:). + - : Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:). - `valeur` - : Toute valeur. ## Description -Le constructeur `Object` crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur. +Le constructeur `Object` crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur. -Lorsqu'il n'est pas appelé dans un contexte constructeur, `Object` se comporte de façon identique à `new Object()`. +Lorsqu'il n'est pas appelé dans un contexte constructeur, `Object` se comporte de façon identique à `new Object()`. -Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet). +Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet). ## Propriétés du constructeur `Object` - `Object.length` - : A une valeur de 1. - {{jsxref("Object.prototype")}} - - : Permet l'ajout de propriétés à tous les objets de type Object. + - : Permet l'ajout de propriétés à tous les objets de type Object. ## Méthodes du constructeur `Object` - {{jsxref("Object.assign()")}} - - : Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible. + - : Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible. - {{jsxref("Object.create()")}} - - : Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués. + - : Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués. - {{jsxref("Object.defineProperty()")}} - - : Ajoute à un objet la propriété nommée décrite par le descripteur donné. + - : Ajoute à un objet la propriété nommée décrite par le descripteur donné. - {{jsxref("Object.defineProperties()")}} - - : Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés. + - : Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés. - {{jsxref("Object.entries()")}} - - : Retourne un tableau contenant les paires `[clé, valeur]` des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères. + - : Retourne un tableau contenant les paires `[clé, valeur]` des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères. - {{jsxref("Object.freeze()")}} - - : Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété. + - : Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété. - {{jsxref("Object.fromEntries()")}} - : Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}). - {{jsxref("Object.getOwnPropertyDescriptor()")}} - - : Retourne un descripteur de propriété pour une propriété nommée d'un objet. + - : Retourne un descripteur de propriété pour une propriété nommée d'un objet. - {{jsxref("Object.getOwnPropertyDescriptors()")}} - - : Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet. + - : Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet. - {{jsxref("Object.getOwnPropertyNames()")}} - - : Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables **propres** de l'objet donné. + - : Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables **propres** de l'objet donné. - {{jsxref("Object.getOwnPropertySymbols()")}} - - : Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné. + - : Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné. - {{jsxref("Object.getPrototypeOf()")}} - : Retourne le prototype de l'objet indiqué. - {{jsxref("Object.is()")}} @@ -78,19 +78,19 @@ Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mo - {{jsxref("Object.isSealed()")}} - : Détermine si un objet est scellé. - {{jsxref("Object.keys()")}} - - : Retourne un tableau contenant les noms de toutes les propriétés énumérables **propres** de l'objet donné. + - : Retourne un tableau contenant les noms de toutes les propriétés énumérables **propres** de l'objet donné. - {{jsxref("Object.preventExtensions()")}} - : Empêche toute extension de l'objet. - {{jsxref("Object.seal()")}} - - : Empêche un autre code de détruire les propriétés d'un objet. + - : Empêche un autre code de détruire les propriétés d'un objet. - {{jsxref("Object.setPrototypeOf()")}} - - : Définit le prototype d'un objet (c-à-d, la propriété interne `[[Prototype]]`). + - : Définit le prototype d'un objet (c-à-d, la propriété interne `[[Prototype]]`). - {{jsxref("Object.values()")}} - - : Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères. + - : Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères. -## Instances d'`Object` et objet de prototype `Object` +## Instances d'`Object` et objet de prototype `Object` -Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du `constructor` et fournissent leurs propres méthodes `toString()`. Les changements apportés à l'objet de prototype `Object` sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes. +Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du `constructor` et fournissent leurs propres méthodes `toString()`. Les changements apportés à l'objet de prototype `Object` sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes. ### Propriétés @@ -100,7 +100,7 @@ Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent {{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }} -## Suppression d'une propriété dans un objet +## Suppression d'une propriété dans un objet Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme [Map.prototype.delete()](/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete)). Pour ce faire, il faut utiliser l'[opérateur delete](/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete). @@ -108,7 +108,7 @@ Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres pro ### Utilisation d'`Object` avec les types `undefined` et `null` -Les exemples suivants stockent un `Object` vide dans `o` : +Les exemples suivants stockent un `Object` vide dans `o` : ```js var o = new Object(); @@ -124,7 +124,7 @@ var o = new Object(null); ### Utilisation d'`Object` pour créer des objets `Boolean` -Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans `o` : +Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans `o` : ```js // Équivalent à : o = new Boolean(true); @@ -143,7 +143,7 @@ var o = new Object(Boolean()); | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.0. | | {{SpecName('ES5.1', '#sec-15.2', 'Object')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-object-objects', 'Object')}} | {{Spec2('ES6')}} | Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is | -| {{SpecName('ESDraft', '#sec-object-objects', 'Object')}} | {{Spec2('ESDraft')}} | Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors. | +| {{SpecName('ESDraft', '#sec-object-objects', 'Object')}} | {{Spec2('ESDraft')}} | Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/is/index.md b/files/fr/web/javascript/reference/global_objects/object/is/index.md index 91b7520c6a..df6daab121 100644 --- a/files/fr/web/javascript/reference/global_objects/object/is/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/is/index.md @@ -43,7 +43,7 @@ Un booléen indiquant si les arguments ont la même valeur. - sont toutes les deux égales à `+0` - sont toutes les deux égales à `-0` - - sont toutes les deux égales à {{jsxref("NaN")}} + - sont toutes les deux égales à {{jsxref("NaN")}} - sont non-nulles, ne sont pas `NaN` et ont toutes les deux la même valeur Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement `"" == false` qui donne `true`), `Object.is` ne convertit aucune des deux valeurs. @@ -94,7 +94,7 @@ if (!Object.is) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-object.is', 'Object.is')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-object.is', 'Object.is')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.is', 'Object.is')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md index 91f2900829..4ff34d173c 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md @@ -71,8 +71,8 @@ Object.isExtensible(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md index f99db9b02a..612441bb7e 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md @@ -135,8 +135,8 @@ Object.isFrozen(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée par JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md index 0ddea97552..d48ac7ff00 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf --- {{JSRef}} -La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet. +La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet. {{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}} @@ -26,16 +26,16 @@ La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la ### Paramètres - `objet` - - : L'objet dont la chaîne de prototypes sera parcourue. + - : L'objet dont la chaîne de prototypes sera parcourue. ### Valeur de retour -Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué. +Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué. ### Erreurs déclenchées - {{jsxref("TypeError")}} - - : Une exception {{jsxref("TypeError")}} est déclenchée si `prototypeObj` est `undefined` ou `null`. + - : Une exception {{jsxref("TypeError")}} est déclenchée si `prototypeObj` est `undefined` ou `null`. ## Description @@ -43,7 +43,7 @@ La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non ## Exemples -Cet exemple montre que `Bidule.prototype`, `Truc.prototype`, `Machin.prototype` et `Object.prototype` font bien partie de la chaîne de prototype pour l'objet `bidule` : +Cet exemple montre que `Bidule.prototype`, `Truc.prototype`, `Machin.prototype` et `Object.prototype` font bien partie de la chaîne de prototype pour l'objet `bidule` : ```js function Machin() {} @@ -61,9 +61,9 @@ console.log(Machin.prototype.isPrototypeOf(bidule)); // true console.log(Object.prototype.isPrototypeOf(bidule)); // true ``` -La méthode `isPrototypeOf()`, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet. +La méthode `isPrototypeOf()`, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet. -Par exemple, vérifier que `bidule` descend bien de `Machin.prototype` : +Par exemple, vérifier que `bidule` descend bien de `Machin.prototype` : ```js if (Toto.prototype.isPrototypeOf(bidule)) { @@ -76,9 +76,9 @@ if (Toto.prototype.isPrototypeOf(bidule)) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/issealed/index.md b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md index 7ad542cbd6..5160bc9896 100644 --- a/files/fr/web/javascript/reference/global_objects/object/issealed/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md @@ -96,8 +96,8 @@ Object.isSealed(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md index 94dd2d20b8..c6573f4b91 100644 --- a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md @@ -98,8 +98,8 @@ Object.preventExtensions(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md index bd52c6c0ab..981d4e18ba 100644 --- a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md @@ -105,9 +105,9 @@ o.propertyIsEnumerable('premièreMéthode'); // renvoie false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md index 1175acddab..a12e55ff2a 100644 --- a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md @@ -33,7 +33,7 @@ L'objet sur lequel on a défini le prototype. ## Description -Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le `[[Prototype]]` est non-extensible selon {{jsxref("Object.isExtensible")}}. Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}). Dans les autres cas, cette méthode substitue le `[[Prototype]]` de `obj` avec un nouvel objet. +Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le `[[Prototype]]` est non-extensible selon {{jsxref("Object.isExtensible")}}. Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}). Dans les autres cas, cette méthode substitue le `[[Prototype]]` de `obj` avec un nouvel objet. `Object.setPrototypeOf()` fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée). @@ -178,7 +178,7 @@ george(); // "Salut !!" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ES2015')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md index c0dcdd5f34..73d4597a42 100644 --- a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString --- {{JSRef}} -La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales. +La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales. {{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}} @@ -25,9 +25,9 @@ Une chaîne de caractères qui représente l'objet en tenant compte de la locale ## Description -La méthode `toLocaleString` renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}. +La méthode `toLocaleString` renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}. -Cette fonction est destinée à fournir aux objets une méthode générique `toLocaleString`, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous. +Cette fonction est destinée à fournir aux objets une méthode générique `toLocaleString`, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous. ### Objets surchargeant la méthode toLocaleString @@ -40,9 +40,9 @@ Cette fonction est destinée à fournir aux objets une méthode générique `to | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/tostring/index.md b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md index e99db8ca3d..72d81ab749 100644 --- a/files/fr/web/javascript/reference/global_objects/object/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md @@ -97,8 +97,8 @@ toString.call(null); // [object Null] | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | | {{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}} | {{Spec2('ES5.1')}} | Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie `[object Null]`, et sur {{jsxref( "undefined")}} elle renvoie `[object Undefined]` | -| {{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/valueof/index.md b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md index d00e0c0f83..bcdf81bed0 100644 --- a/files/fr/web/javascript/reference/global_objects/object/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md @@ -26,9 +26,9 @@ La valeur primitive de l'objet appelant. ## Description -JavaScript appelle la méthode `valueOf` pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode `valueOf` ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive. +JavaScript appelle la méthode `valueOf` pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode `valueOf` ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive. -Par défaut, la méthode `valueOf` est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, `valueOf` renvoie l'objet lui-même, ce qui sera affiché comme : +Par défaut, la méthode `valueOf` est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, `valueOf` renvoie l'objet lui-même, ce qui sera affiché comme : ```js [object Object] @@ -78,9 +78,9 @@ console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/values/index.md b/files/fr/web/javascript/reference/global_objects/object/values/index.md index adb87b914d..ddc3a492c2 100644 --- a/files/fr/web/javascript/reference/global_objects/object/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/values/index.md @@ -69,7 +69,7 @@ Afin d'ajouter le support pour `Object.values` dans des environnements plus anci | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.values', 'Object.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.values', 'Object.values')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-object.values', 'Object.values')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md index f7bf7406e6..e304fe735b 100644 --- a/files/fr/web/javascript/reference/global_objects/parsefloat/index.md +++ b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md @@ -28,7 +28,7 @@ Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. S ## Description -`parseFloat` est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript. +`parseFloat` est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript. `parseFloat` analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés. @@ -58,7 +58,7 @@ parseFloat("3.14d'autres caractères non numériques"); var titi = Object.create(null); titi.valueOf = function () { return "3.14"; }; -parseFloat(titi); +parseFloat(titi); ``` ### Utiliser `parseFloat()` pour renvoyer `NaN` diff --git a/files/fr/web/javascript/reference/global_objects/parseint/index.md b/files/fr/web/javascript/reference/global_objects/parseint/index.md index 747f5a87bc..2d567c871c 100644 --- a/files/fr/web/javascript/reference/global_objects/parseint/index.md +++ b/files/fr/web/javascript/reference/global_objects/parseint/index.md @@ -104,7 +104,7 @@ parseInt("4e2", 10); parseInt("4.7", 10); ``` -L'exemple suivant renvoie **`224`** : +L'exemple suivant renvoie **`224`** : ```js parseInt("0e0", 16); diff --git a/files/fr/web/javascript/reference/global_objects/promise/all/index.md b/files/fr/web/javascript/reference/global_objects/promise/all/index.md index 9db4fac33d..bfefa42d75 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/all/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/all/index.md @@ -192,7 +192,7 @@ setTimeout(function() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------ | | {{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ES2015')}} | Définition initiale dans un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/reject/index.md b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md index 884d2baec5..bf16163abf 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/reject/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md @@ -48,7 +48,7 @@ Promise.reject(new Error("échec")).then(function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------- | | {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md index 9bf6a9dc3f..0f45080940 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md @@ -124,7 +124,7 @@ p3.then(function(v) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- | | {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/then/index.md b/files/fr/web/javascript/reference/global_objects/promise/then/index.md index 9720700136..52cade1536 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/then/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/then/index.md @@ -144,7 +144,7 @@ Promise.resolve() }); ``` -Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier `then()` renvoie `42` même si la promesse précédente a été rompue : +Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier `then()` renvoie `42` même si la promesse précédente a été rompue : ```js Promise.reject() diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/index.md index b2cbf0db65..82d62e7ad2 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/index.md @@ -40,7 +40,7 @@ L'objet **Proxy** est utilisé afin de définir un comportement sur mesure pour ## Méthodes pour le gestionnaire -L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le `Proxy`. +L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le `Proxy`. {{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }} @@ -67,7 +67,7 @@ console.log(p.a, p.b); // 1, undefined console.log('c' in p, p.c); // false, 37 ``` -### Proxy « invisible » +### Proxy « invisible » Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible. @@ -305,7 +305,7 @@ console.log(produits.nombre); // 3 ### Un exemple avec toutes les trappes -Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global `docCookies` créé grâce à [cet exemple](/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework). +Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global `docCookies` créé grâce à [cet exemple](/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework). ```js /* diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md index 804405fffd..047d555aa3 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md @@ -79,7 +79,7 @@ console.log(p(1, 2, 3)); // "called: 1, 2, 3" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md index 289518a7e9..951a557851 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md @@ -27,7 +27,7 @@ var p = new Proxy(cible, { ### Paramètres -Les paramètres suivants sont passés à la méthode `construct`. `this` est ici lié au gestionnaire (_handler_). +Les paramètres suivants sont passés à la méthode `construct`. `this` est ici lié au gestionnaire (_handler_). - `cible` - : L'objet cible. @@ -102,7 +102,7 @@ new p(); // TypeError: p is not a constructor | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md index 969b386662..2fb2c7e1b8 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md @@ -105,7 +105,7 @@ Object.defineProperty(p, "name, { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md index 8cc45e09bb..8263812279 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md @@ -75,7 +75,7 @@ delete p.a; // "appelée sur : a" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md index db316e304d..b606c27374 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md @@ -100,7 +100,7 @@ p.a; // exception TypeError levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ESDraft')}} | | ## Compatiblité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md index 7f4b9c63f4..20f3c91610 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md @@ -95,7 +95,7 @@ Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyé | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md index 2f339ae97e..13a790db39 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototyp --- {{JSRef}} -La méthode **`handler.getPrototypeOf()`** représente une trappe pour la méthode interne `[[GetPrototypeOf]]`. +La méthode **`handler.getPrototypeOf()`** représente une trappe pour la méthode interne `[[GetPrototypeOf]]`. {{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}} @@ -21,7 +21,7 @@ La méthode **`handler.getPrototypeOf()`** représente une trappe pour la métho ```js var p = new Proxy(obj, { getPrototypeOf(cible) { - ... + ... } }); ``` @@ -65,8 +65,8 @@ var obj = {}; var proto = {}; var gestionnaire = { getPrototypeOf(cible) { - console.log(cible === obj); // true - console.log(this === gestionnaire); // true + console.log(cible === obj); // true + console.log(this === gestionnaire); // true return proto; } }; @@ -118,7 +118,7 @@ Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le proto | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md index 7a9efe5f69..aabac1afa7 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md @@ -93,7 +93,7 @@ var p = new Proxy(obj, { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md index 23fca9ad60..d39dc8a17f 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler --- {{JSRef}} -L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (_traps_) pour le {{jsxref("Proxy", "proxy", "", 1)}}. +L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (_traps_) pour le {{jsxref("Proxy", "proxy", "", 1)}}. ## Méthodes diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md index 9d335fd28b..0bf4e1fbfa 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md @@ -49,7 +49,7 @@ Cette trappe intercepte les opérations suivantes : ### Invariants -Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} : +Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} : - `Object.isExtensible(proxy)` doit renvoyer la même valeur que `Object.isExtensible(cible)`. @@ -86,7 +86,7 @@ Object.isExtensible(p); // TypeError est levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md index a2e36cefde..b50147641b 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md @@ -99,7 +99,7 @@ console.log(Object.getOwnPropertyNames(p)); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md index 5583e5c760..3930f8d46e 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md @@ -87,7 +87,7 @@ Object.preventExtensions(p); // TypeError est levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md index 544cc21fa2..55cf870259 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md @@ -87,7 +87,7 @@ console.log(p.a); // 10 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md index 104f392d73..ba01ecc757 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md @@ -59,7 +59,7 @@ Si les invariants suivants ne sont pas respectés, le proxy renverra une excepti Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode `setPrototypeOf` qui renvoie `false` ou qui génère une exception. -Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception `TypeError`. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée. +Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception `TypeError`. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée. ```js var handlerReturnsFalse = { @@ -100,7 +100,7 @@ Reflect.setPrototypeOf(p2, newProto); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md index 376cf22348..30dd3bf51c 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md @@ -61,7 +61,7 @@ typeof proxy // "object", typeof ne déclenche aucune trappe | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/referenceerror/index.md b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md index 6aeba987ce..0ec502ed35 100644 --- a/files/fr/web/javascript/reference/global_objects/referenceerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md index 91ae28899f..47860ed34f 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md @@ -68,7 +68,7 @@ Reflect.apply("".charAt, "poneys", [3]); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md index 695f08ec57..43f64d8a83 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md @@ -68,7 +68,7 @@ if (Reflect.defineProperty(cible, propriété, attributs)) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md index 127234427e..1159378a5f 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md @@ -62,7 +62,7 @@ Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/get/index.md b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md index 12e8fd4936..b6f657f92c 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md @@ -64,7 +64,7 @@ Reflect.get(obj, "toto"); // "tototruc" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md index 2575a14d5c..c87f13e5b1 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md @@ -71,7 +71,7 @@ Object.getOwnPropertyDescriptor("toto", 0); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md index ff07298675..2bc09f4464 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md @@ -73,7 +73,7 @@ Reflect.getPrototypeOf(Object('toto')); // String.prototype | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/has/index.md b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md index 8ac0252a59..b40bbe3e47 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md @@ -62,7 +62,7 @@ Reflect.has(obj, "bonbon"); // false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/index.md b/files/fr/web/javascript/reference/global_objects/reflect/index.md index a00114cb15..89ee1d00ad 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/index.md @@ -24,7 +24,7 @@ L'objet `Reflect` fournit des fonctions statiques qui ont les mêmes noms que le - {{jsxref("Reflect.apply()")}} - : Appelle une fonction cible avec les arguments définis par le paramètres `args`. Voir aussi {{jsxref("Function.prototype.apply()")}}. - {{jsxref("Reflect.construct()")}} - - : L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à `new cible(...args)`. Cette méthode permet également d'indiquer un prototype différent. + - : L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à `new cible(...args)`. Cette méthode permet également d'indiquer un prototype différent. - {{jsxref("Reflect.defineProperty()")}} - : Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}. - {{jsxref("Reflect.deleteProperty()")}} diff --git a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md index a779cf765a..dabb51d9fe 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md @@ -80,7 +80,7 @@ Object.isExtensible(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md index 2a1f0a4323..df51dda07e 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys --- {{JSRef}} -La méthode statique **`Reflect.ownKeys()`** renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet `cible`. +La méthode statique **`Reflect.ownKeys()`** renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet `cible`. {{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}} @@ -57,7 +57,7 @@ La méthode `Reflect.ownKeys` renvoie un tableau dont les éléments sont les cl | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/set/index.md b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md index 5d3d0ff05d..977b456156 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md @@ -75,7 +75,7 @@ Reflect.getOwnPropertyDescriptor(obj, "undefined"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md index 0126ab2d2f..b5fd6fcfa6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md @@ -85,7 +85,7 @@ console.log(résultat.group(3)); // 02 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md index b0e6a51185..01e1d4545c 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md @@ -83,7 +83,7 @@ console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md index f1ea9e66db..b5ac864e0d 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md @@ -91,7 +91,7 @@ console.log(newstr); // ###34567 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md index 8b241fbe93..2ed5876578 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md @@ -82,7 +82,7 @@ console.log(résultat); // 3 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md index f073630ef9..595aa06085 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md @@ -48,7 +48,7 @@ class MaRegExp extends RegExp { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md index 8b576affe5..fdb34c263f 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md @@ -50,7 +50,7 @@ Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref( ### Appel direct -Cette méthode peut être utilisée comme {{jsxref("String.prototype.split()")}}, l'objet `this` est différent et l'ordre des arguments également. +Cette méthode peut être utilisée comme {{jsxref("String.prototype.split()")}}, l'objet `this` est différent et l'ordre des arguments également. ```js var re = /-/g; @@ -61,7 +61,7 @@ console.log(résultat); // ["2016", "01", "02"] ### Utiliser `@@split` avec une sous-classe -Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger `[@@split]()` afin de modifier le comportement de la découpe : +Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger `[@@split]()` afin de modifier le comportement de la découpe : ```js class MaRegExp extends RegExp { diff --git a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md index fec7a889dd..bfe0e79265 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md @@ -42,7 +42,7 @@ La méthode `compile` est dépréciée. Pour obtenir le même effet, on utiliser ## Exemples -Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à la méthode `compile()`. +Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à la méthode `compile()`. ```js var regexObj = new RegExp("toto", "gi"); diff --git a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md index 1c8c351469..6bee024da6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll --- {{JSRef}}{{Draft}} -La propriété **`dotAll`** indique si le marqueur "`s`" est utilisé pour l'expression rationnelle. `dotAll` est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante. +La propriété **`dotAll`** indique si le marqueur "`s`" est utilisé pour l'expression rationnelle. `dotAll` est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante. {{JS_Property_Attributes(0, 0, 1)}} diff --git a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md index 1bea14f02d..e4539ffe1b 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md @@ -49,7 +49,7 @@ if (RegExp.prototype.flags === undefined) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/global/index.md b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md index 0b97b04853..7b884a9601 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/global/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md @@ -45,9 +45,9 @@ console.log(str2); // affichera "exempletoto" dans la console | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `global` est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ES6')}} | `global` est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md index d893c5d57e..1320fcfd7f 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md @@ -35,9 +35,9 @@ console.log(regex.ignoreCase); // true | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `ignoreCase` est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES6')}} | `ignoreCase` est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/index.md b/files/fr/web/javascript/reference/global_objects/regexp/index.md index 85c0aeee92..2c9241fe25 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/index.md @@ -14,13 +14,13 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp Le constructeur **RegExp** crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte. -Pour une introduction aux expressions rationnelles, lire le [chapitre Expressions rationnelles dans le Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res). +Pour une introduction aux expressions rationnelles, lire le [chapitre Expressions rationnelles dans le Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res). {{EmbedInteractiveExample("pages/js/regexp-constructor.html")}} ## Syntaxe -Les notations littérales, par constructeur ou de base sont possibles : +Les notations littérales, par constructeur ou de base sont possibles : /modèle/marqueurs new RegExp(modèle[, marqueurs]) @@ -39,9 +39,9 @@ Les notations littérales, par constructeur ou de base sont possibles : - `i` - : la casse est ignorée. Si le marqueur `u` est également activé, les caractères Unicode équivalents pour la casse correspondent. - `m` - - : multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de _chaque_ ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète). + - : multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de _chaque_ ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète). - `u` - - : unicode : traite le modèle comme une séquence de points de code Unicode (voir également [les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)). + - : unicode : traite le modèle comme une séquence de points de code Unicode (voir également [les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)). - `y` - : adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété `lastIndex` de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà). - `s` @@ -57,11 +57,11 @@ new RegExp('ab+c', 'i'); // constructeur new RegExp(/ab+c/, 'i'); // notation littérale dans un constructeur ``` -La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération. +La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération. -Le constructeur de l'objet expression rationnelle, par exemple `new RegExp('ab+c')`, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur. +Le constructeur de l'objet expression rationnelle, par exemple `new RegExp('ab+c')`, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur. -À partir d'ECMAScript 6, `new RegExp(/ab+c/, 'i')` ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument `marqueurs` est présent. Une nouvelle `RegExp` sera créée à la place à partir des arguments. +À partir d'ECMAScript 6, `new RegExp(/ab+c/, 'i')` ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument `marqueurs` est présent. Une nouvelle `RegExp` sera créée à la place à partir des arguments. Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes : @@ -132,7 +132,7 @@ s.match(/voici[^]*ligne/); // Renvoie ['voici\nune autre ligne'] ``` -### Utiliser une expression rationnelle avec le marqueur d'adhérence +### Utiliser une expression rationnelle avec le marqueur d'adhérence Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}. diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md index 4693bdfb7a..ec3072f151 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md @@ -57,9 +57,9 @@ Renvoie `["", undefined]`, un tableau dont le premier élément est la chaîne v | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. JavaScript 1.5 : `lastIndex` est une propriété d'une instance de `RegExp` et n'est pas une propriété directe de `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md index 72c86650cf..3e9ac548aa 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md @@ -35,9 +35,9 @@ console.log(regex.multiline); // true | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `multiline` est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ES6')}} | `multiline` est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/source/index.md b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md index 86cf78ae27..b4d3925df6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/source/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md @@ -44,7 +44,7 @@ new RegExp('\n').source === "\\n"; // true à partir d'ES5 | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `source` est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet `RegExp`. | | {{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}} | {{Spec2('ES5.1')}} | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée. | | {{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ES6')}} | `source` est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md index eb5c5a2b52..d6d7d3c89b 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md @@ -60,7 +60,7 @@ regex2.test(".\nfoo"); // true | Spécification | Etat | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/test/index.md b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md index 776fc120b3..6e687152de 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/test/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md @@ -31,7 +31,7 @@ Un booléen : `true` ou `false` selon qu'une correspondance a été trouvée ent ## Description -On utilisera `test()` dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à `test()` sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de `search` car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou `-1` sinon). +On utilisera `test()` dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à `test()` sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de `search` car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou `-1` sinon). ## Exemples @@ -102,7 +102,7 @@ console.log(compterMots("Ah que coucou Bob")); // 4 ## Notes spécifiques à Firefox -Pour les versions antérieures à Firefox 8.0, l'implémentation de `test()` était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété `RegExp.input`) et non par rapport à la chaîne `"undefined"`. Ce comportement a été corrigé ; désormais `/undefined/.test()` retourne bien `true` au lieu d'une erreur. +Pour les versions antérieures à Firefox 8.0, l'implémentation de `test()` était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété `RegExp.input`) et non par rapport à la chaîne `"undefined"`. Ce comportement a été corrigé ; désormais `/undefined/.test()` retourne bien `true` au lieu d'une erreur. ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md index 6b2a2e6413..ccbf6a9201 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md @@ -59,8 +59,8 @@ new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5 | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. | | {{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}} | {{Spec2('ES5.1')}} | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée. | -| {{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md index 671fb82624..386d25b353 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md @@ -37,7 +37,7 @@ console.log(regex.unicode); // true | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md index d420a2b5df..f1a77b803c 100644 --- a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md @@ -61,7 +61,7 @@ for (const v of monSet) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/@@species/index.md b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md index aff8a084ae..cab821f7cf 100644 --- a/files/fr/web/javascript/reference/global_objects/set/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md @@ -45,7 +45,7 @@ class MonSet extends Set | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/add/index.md b/files/fr/web/javascript/reference/global_objects/set/add/index.md index bdddb11403..02eb5d3721 100644 --- a/files/fr/web/javascript/reference/global_objects/set/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/add/index.md @@ -47,7 +47,7 @@ console.log(monSet); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/clear/index.md b/files/fr/web/javascript/reference/global_objects/set/clear/index.md index 9a5be9a488..0e23cac24c 100644 --- a/files/fr/web/javascript/reference/global_objects/set/clear/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/clear/index.md @@ -46,7 +46,7 @@ monSet.has("truc") // false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/delete/index.md b/files/fr/web/javascript/reference/global_objects/set/delete/index.md index f888bc831f..c84589d06b 100644 --- a/files/fr/web/javascript/reference/global_objects/set/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/delete/index.md @@ -65,7 +65,7 @@ objetSet.forEach(function(point){ | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/foreach/index.md b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md index 63d00d027f..a60c25cce3 100644 --- a/files/fr/web/javascript/reference/global_objects/set/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md @@ -79,7 +79,7 @@ new Set(["toto", "truc", undefined]).forEach(logSetElements); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/has/index.md b/files/fr/web/javascript/reference/global_objects/set/has/index.md index 3718eecc6d..e02d2deedf 100644 --- a/files/fr/web/javascript/reference/global_objects/set/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/has/index.md @@ -55,7 +55,7 @@ set1.add({'cle1': 1}); // set1 contient désormais 2 éléments | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/index.md b/files/fr/web/javascript/reference/global_objects/set/index.md index accdda32a3..60b9ae1048 100644 --- a/files/fr/web/javascript/reference/global_objects/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/index.md @@ -34,7 +34,7 @@ Les objets `Set` sont des ensembles de valeurs. Il est possible d'itérer sur le ### Égalité des valeurs -Chaque valeur d'un `Set` doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets `Set`, `+0` (qui, selon l'égalité stricte, est égal à `-0`) et `-0` sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour `0` et `-0`. +Chaque valeur d'un `Set` doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets `Set`, `+0` (qui, selon l'égalité stricte, est égal à `-0`) et `-0` sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour `0` et `-0`. {{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet `Set`. `NaN` est considéré comme `NaN` (bien que `NaN !== NaN`). diff --git a/files/fr/web/javascript/reference/global_objects/set/values/index.md b/files/fr/web/javascript/reference/global_objects/set/values/index.md index 2a0de375f4..c8b6de9f00 100644 --- a/files/fr/web/javascript/reference/global_objects/set/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/values/index.md @@ -48,7 +48,7 @@ console.log(setIter.next().value); // "machin" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md index 76dc3ea66f..d83172e1b7 100644 --- a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md @@ -38,7 +38,7 @@ Un nouvel objet `SharedArrayBuffer` de la taille donnée, dont les éléments so Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses _web workers_), on utilise [`postMessage`](/fr/docs/Web/API/Worker/postMessage) et [le clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). -L'algorithme de clonage structuré permet d'envoyer des objets `SharedArrayBuffers` et `TypedArrays` vers `SharedArrayBuffers`. Dans les deux cas, l'objet `SharedArrayBuffer` est transmis au récepteur, ce qui crée un nouvel objet `SharedArrayBuffer`, privé, au sein de l'agent qui reçoit (comme avec {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets ` Shared``ArrayBuffer ` est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications. +L'algorithme de clonage structuré permet d'envoyer des objets `SharedArrayBuffers` et `TypedArrays` vers `SharedArrayBuffers`. Dans les deux cas, l'objet `SharedArrayBuffer` est transmis au récepteur, ce qui crée un nouvel objet `SharedArrayBuffer`, privé, au sein de l'agent qui reçoit (comme avec {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets ` Shared``ArrayBuffer ` est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications. ```js var sab = new SharedArrayBuffer(1024); diff --git a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md index 38ea873740..3fcd4f9784 100644 --- a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md @@ -60,7 +60,7 @@ for (var c of chaine) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/bold/index.md b/files/fr/web/javascript/reference/global_objects/string/bold/index.md index 63faf319aa..e802608391 100644 --- a/files/fr/web/javascript/reference/global_objects/string/bold/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/bold/index.md @@ -25,7 +25,7 @@ Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}. ## Description -La méthode `bold()` place la chaine de caractères dans une balise `<b>` : +La méthode `bold()` place la chaine de caractères dans une balise `<b>` : `"<b>str</b>`" ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/string/charat/index.md b/files/fr/web/javascript/reference/global_objects/string/charat/index.md index 5e6c4ef2b6..db2faaca87 100644 --- a/files/fr/web/javascript/reference/global_objects/string/charat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/charat/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/charAt --- {{JSRef}} -La méthode **`charAt()`** renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16) à la position indiquée en argument. +La méthode **`charAt()`** renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16) à la position indiquée en argument. {{EmbedInteractiveExample("pages/js/string-charat.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md index 8f6b9a9827..0b5ca592ed 100644 --- a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md @@ -110,7 +110,7 @@ if (!String.prototype.codePointAt) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/concat/index.md b/files/fr/web/javascript/reference/global_objects/string/concat/index.md index 10583c89a1..7902329226 100644 --- a/files/fr/web/javascript/reference/global_objects/string/concat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/concat/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/concat --- {{JSRef}} -La méthode **`concat()`** combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée. +La méthode **`concat()`** combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée. {{EmbedInteractiveExample("pages/js/string-concat.html")}} @@ -31,7 +31,7 @@ Une nouvelle chaîne de caractères qui contient la concaténation des chaînes ## Description -La fonction `concat()` renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode `concat()`. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode `toString()` avant la concaténation). +La fonction `concat()` renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode `concat()`. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode `toString()` avant la concaténation). ## Exemples @@ -55,7 +55,7 @@ var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!']; ## Performance -Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode `concat()` pour des raisons de performance. +Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode `concat()` pour des raisons de performance. ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/string/endswith/index.md b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md index ce3dc39e2d..8159c85557 100644 --- a/files/fr/web/javascript/reference/global_objects/string/endswith/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md @@ -53,13 +53,13 @@ Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne p ```js if (!String.prototype.endsWith) { String.prototype.endsWith = function(searchString, position) { - var subjectString = this.toString(); - if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) { - position = subjectString.length; + var subjectString = this.toString(); + if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) { + position = subjectString.length; } position -= searchString.length; var lastIndex = subjectString.lastIndexOf(searchString, position); - return lastIndex !== -1 && lastIndex === position; + return lastIndex !== -1 && lastIndex === position; }; } ``` @@ -69,7 +69,7 @@ if (!String.prototype.endsWith) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md index 0764c3f5d1..de13b92277 100644 --- a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md @@ -32,7 +32,7 @@ Une chaîne de caractères représentant un élément HTML {{HTMLElement("font") ## Description -Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est `rrvvbb`. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA, vert = 80, et bleu = 72, le triplet s'écrit donc "`FA8072`". +Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est `rrvvbb`. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA, vert = 80, et bleu = 72, le triplet s'écrit donc "`FA8072`". ## Exemples @@ -48,7 +48,7 @@ console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur c // '<font color="FF00">Coucou monde</font> avec la valeur hexadécimale sur cette ligne' ``` -L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple : +L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple : ```js document.getElementById('IDdeVotreElement').style.color = 'red' diff --git a/files/fr/web/javascript/reference/global_objects/string/includes/index.md b/files/fr/web/javascript/reference/global_objects/string/includes/index.md index 55799ebce2..a49e0316db 100644 --- a/files/fr/web/javascript/reference/global_objects/string/includes/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/includes/index.md @@ -70,9 +70,9 @@ if (!String.prototype.includes) { String.prototype.includes = function(search, start) { 'use strict'; - if (search instanceof RegExp) { - throw TypeError('first argument must not be a RegExp'); - } + if (search instanceof RegExp) { + throw TypeError('first argument must not be a RegExp'); + } if (start === undefined) { start = 0; } return this.indexOf(search, start) !== -1; }; diff --git a/files/fr/web/javascript/reference/global_objects/string/index.md b/files/fr/web/javascript/reference/global_objects/string/index.md index 64d251773f..ed56beb00d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/index.md @@ -71,7 +71,7 @@ if (a < b) { // true On peut obtenir un résultat semblable avec la méthode [`localeCompare()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de `String`. -On notera que `a == b` compare les chaînes de caractères `a` et `b` de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à : +On notera que `a == b` compare les chaînes de caractères `a` et `b` de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à : ```js function isEqual(str1, str2) { @@ -109,7 +109,7 @@ Pour ces raisons, il peut y avoir certains problèmes quand le code attend une c Un objet `String` peut toujours être converti en son équivalent primitif grâce à la méthode [`valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf). ```js -console.log(eval(s2.valueOf())); // renvoie 4 +console.log(eval(s2.valueOf())); // renvoie 4 ``` ### Échappement des caractères diff --git a/files/fr/web/javascript/reference/global_objects/string/indexof/index.md b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md index 5f7234c4ee..1d0b16cf0f 100644 --- a/files/fr/web/javascript/reference/global_objects/string/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md @@ -39,12 +39,12 @@ L'indice de la première occurrence de la valeur indiquée, `-1` si elle n'est p Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne `str`) est `str.length - 1.` ```js -"Blue Whale".indexOf("Blue"); // retourne 0 +"Blue Whale".indexOf("Blue"); // retourne 0 "Blue Whale".indexOf("Blute"); // retourne -1 -"Blue Whale".indexOf("Whale", 0); // retourne 5 -"Blue Whale".indexOf("Whale", 5); // retourne 5 -"Blue Whale".indexOf(""); // retourne 0 -"Blue Whale".indexOf("", 9); // retourne 9 +"Blue Whale".indexOf("Whale", 0); // retourne 5 +"Blue Whale".indexOf("Whale", 5); // retourne 5 +"Blue Whale".indexOf(""); // retourne 0 +"Blue Whale".indexOf("", 9); // retourne 9 "Blue Whale".indexOf("", 10); // retourne 10 "Blue Whale".indexOf("", 11); // retourne 10 ``` @@ -119,9 +119,9 @@ console.log(count); // Affiche 2 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md index 8aa2008326..6aa075c1d4 100644 --- a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md @@ -25,7 +25,7 @@ La méthode **`lastIndexOf()`** renvoie l'indice, dans la chaîne courante, de l - `valeurRecherchée` - : Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que `indiceDébut` est utilisé, c'est ce dernier qui sera renvoyé par la fonction. - `indiceDébut` {{optional_inline}} - - : Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est `+Infinity`. Si `indiceDébut > str.length`, toute la chaîne sera parcourue. Si `indiceDébut < 0`, on aura le même comportement que si `indiceDébut` valait 0. + - : Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est `+Infinity`. Si `indiceDébut > str.length`, toute la chaîne sera parcourue. Si `indiceDébut < 0`, on aura le même comportement que si `indiceDébut` valait 0. ### Valeur de retour @@ -36,17 +36,17 @@ L'indice de la dernière occurrence de la valeur indiquée, `-1` si elle n'est p Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut `maChaîne.length - 1`. ```js -'canal'.lastIndexOf('a'); // renvoie 3 -'canal'.lastIndexOf('a', 2); // renvoie 1 -'canal'.lastIndexOf('a', 0); // renvoie -1 -'canal'.lastIndexOf('x'); // renvoie -1 +'canal'.lastIndexOf('a'); // renvoie 3 +'canal'.lastIndexOf('a', 2); // renvoie 1 +'canal'.lastIndexOf('a', 0); // renvoie -1 +'canal'.lastIndexOf('x'); // renvoie -1 'canal'.lastIndexOf('c', -5); // renvoie 0 -'canal'.lastIndexOf('c', 0); // renvoie 0 -'canal'.lastIndexOf(''); // renvoie 5 -'canal'.lastIndexOf('', 2); // renvoie 2 +'canal'.lastIndexOf('c', 0); // renvoie 0 +'canal'.lastIndexOf(''); // renvoie 5 +'canal'.lastIndexOf('', 2); // renvoie 2 ``` -> **Note :** `'abab'.lastIndexOf('ab', 2)` renvoie `2` et pas `0` car l'argument `indiceDébut` ne limite que le début de la correspondance recherchée ( qui est `'ab'`) +> **Note :** `'abab'.lastIndexOf('ab', 2)` renvoie `2` et pas `0` car l'argument `indiceDébut` ne limite que le début de la correspondance recherchée ( qui est `'ab'`) ### Sensibilité à la casse diff --git a/files/fr/web/javascript/reference/global_objects/string/link/index.md b/files/fr/web/javascript/reference/global_objects/string/link/index.md index d3188e88f6..0c533468b0 100644 --- a/files/fr/web/javascript/reference/global_objects/string/link/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/link/index.md @@ -58,7 +58,7 @@ console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL)); ## Notes relatives à Gecko -- À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote **"** est automatiquement remplacé par l'entité HTML de référence dans le paramètre `url`. +- À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote **"** est automatiquement remplacé par l'entité HTML de référence dans le paramètre `url`. ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md index 0ea80e71db..07f6b337f4 100644 --- a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md @@ -77,9 +77,9 @@ Les argument `locales` et `options` ne sont pas supportés par tous les navigate ```js function localeCompareSupportsLocales() { try { - "a".localeCompare("b", "i"); + "a".localeCompare("b", "i"); } catch (e) { - return e.name === "RangeError"; + return e.name === "RangeError"; } return false; } @@ -128,12 +128,12 @@ Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 1.0')}} | Définition des paramètres `locale` et `option` | -| {{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/match/index.md b/files/fr/web/javascript/reference/global_objects/string/match/index.md index 9b070559b6..1709c5a758 100644 --- a/files/fr/web/javascript/reference/global_objects/string/match/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/match/index.md @@ -87,7 +87,7 @@ console.log(tableau_correspondances); ### Utiliser un paramètre qui n'est pas une `RegExp` -Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet {{jsxref("RegExp")}} grâce à `new RegExp(obj)`. Si c'est un nombre positif avec le signe +, la méthode `RegExp()` ignorera ce signe. +Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet {{jsxref("RegExp")}} grâce à `new RegExp(obj)`. Si c'est un nombre positif avec le signe +, la méthode `RegExp()` ignorera ce signe. ```js var str1 = "NaN signifie : qui n'est pas un nombre."; @@ -103,9 +103,9 @@ str2.match(+65); // Renvoie également ["65"] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/normalize/index.md b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md index 4e2eaabca9..fdceb450b7 100644 --- a/files/fr/web/javascript/reference/global_objects/string/normalize/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md @@ -91,7 +91,7 @@ str.normalize("NFKD"); // "\u0073\u0323\u0307" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/padend/index.md b/files/fr/web/javascript/reference/global_objects/string/padend/index.md index 07462ad3f9..7152308b7f 100644 --- a/files/fr/web/javascript/reference/global_objects/string/padend/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/padend/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd --- {{JSRef}} -La méthode **`padEnd()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin. +La méthode **`padEnd()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin. {{EmbedInteractiveExample("pages/js/string-padend.html")}} @@ -33,7 +33,7 @@ Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle ind ## Exemples ```js -'abc'.padEnd(10); // "abc " +'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "toto"); // "abctototot" 'abc'.padEnd(6,"123456"); // "abc123" 'abc'.padEnd(1); // "abc" diff --git a/files/fr/web/javascript/reference/global_objects/string/padstart/index.md b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md index 1957a024e6..9619fec252 100644 --- a/files/fr/web/javascript/reference/global_objects/string/padstart/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md @@ -33,7 +33,7 @@ Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle ind ## Exemples ```js -'abc'.padStart(10); // " abc" +'abc'.padStart(10); // " abc" 'abc'.padStart(10, "toto"); // "totototabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" diff --git a/files/fr/web/javascript/reference/global_objects/string/replace/index.md b/files/fr/web/javascript/reference/global_objects/string/replace/index.md index 3dbd06edb5..27d6d49033 100644 --- a/files/fr/web/javascript/reference/global_objects/string/replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/replace/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/replace --- {{JSRef}} -La méthode **`replace()`** renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un `modèle` sont remplacées par un `remplacement`. Le `modèle` utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si `modèle` est une chaîne de caractères, seule la première correspondance sera remplacée. +La méthode **`replace()`** renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un `modèle` sont remplacées par un `remplacement`. Le `modèle` utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si `modèle` est une chaîne de caractères, seule la première correspondance sera remplacée. La chaîne de caractère originale reste inchangée. @@ -26,28 +26,28 @@ La chaîne de caractère originale reste inchangée. ### Paramètres -- `regexp` (modèle) - - : Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées par `nouvSouschn` ou par la valeur retournée par la `fonction` indiquée. -- `souschn` (modèle) - - : Une {{jsxref("String")}} qui est à remplacer par `nouvSouschn`. Elle est traitée comme une chaîne de caractères verbatim et elle n'est _pas_ interprétée comme une expression régulière. Seule la première occurrence sera remplacée. -- `nouvSouschn` (remplacement) - - : La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre `regexp` ou `souschn`. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "[Indiquer une chaîne de caractères comme paramètre](#Indiquer_une_chaîne_de_caractère_comme_paramètre)" ci-dessous. -- `fonction` (remplacement) - - : Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la `regexp` ou la `souschn` donnée. Les arguments passés à cette fonction sont décrits dans la section "[Indiquer une fonction comme paramètre](#Indiquer_une_fonction_comme_paramètre)" ci-dessous. +- `regexp` (modèle) + - : Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées par `nouvSouschn` ou par la valeur retournée par la `fonction` indiquée. +- `souschn` (modèle) + - : Une {{jsxref("String")}} qui est à remplacer par `nouvSouschn`. Elle est traitée comme une chaîne de caractères verbatim et elle n'est _pas_ interprétée comme une expression régulière. Seule la première occurrence sera remplacée. +- `nouvSouschn` (remplacement) + - : La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre `regexp` ou `souschn`. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "[Indiquer une chaîne de caractères comme paramètre](#Indiquer_une_chaîne_de_caractère_comme_paramètre)" ci-dessous. +- `fonction` (remplacement) + - : Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la `regexp` ou la `souschn` donnée. Les arguments passés à cette fonction sont décrits dans la section "[Indiquer une fonction comme paramètre](#Indiquer_une_fonction_comme_paramètre)" ci-dessous. ### Valeur retournée -Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement. +Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement. ## Description -Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères. +Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères. -Pour réaliser une recherche et remplacement global(e), incluez le commutateur `g` dans l'expression régulière. +Pour réaliser une recherche et remplacement global(e), incluez le commutateur `g` dans l'expression régulière. ### Indiquer une chaîne de caractère comme paramètre -La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants : +La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants : <table class="standard-table"> <tbody> @@ -81,11 +81,11 @@ La chaîne de caractère de remplacement peut inclure les modèles de remplace <td><code>$n</code></td> <td> <p> - Où <code><em>n</em></code> est un entier positif inférieur à 100. - Insère la <em>n</em> ième chaîne de sous-correspondance entre - parenthèses, à condition que le premier argument ait été un objet - {{jsxref("RegExp")}}. Notez que ceci est réalisé en - indices base 1. + Où <code><em>n</em></code> est un entier positif inférieur à 100. + Insère la <em>n</em> ième chaîne de sous-correspondance entre + parenthèses, à condition que le premier argument ait été un objet + {{jsxref("RegExp")}}. Notez que ceci est réalisé en + indices base 1. </p> </td> </tr> @@ -94,9 +94,9 @@ La chaîne de caractère de remplacement peut inclure les modèles de remplace ### Indiquer une fonction comme paramètre -Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent _pas_ dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale. +Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent _pas_ dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale. -Les arguments de cette fonction sont les suivants : +Les arguments de cette fonction sont les suivants : <table class="standard-table"> <tbody> @@ -115,14 +115,14 @@ Les arguments de cette fonction sont les suivants : <td><code>p1, p2, ...</code></td> <td> <p> - La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses - capturantes, à condition que le premier argument de <code + La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses + capturantes, à condition que le premier argument de <code >replace()</code > - soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, - <code>$2</code>, etc. ci-dessus.) Par exemple, - si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond - à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>. + soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, + <code>$2</code>, etc. ci-dessus.) Par exemple, + si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond + à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>. </p> </td> </tr> @@ -131,8 +131,8 @@ Les arguments de cette fonction sont les suivants : <td> Le décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète - était <code>'abcd'</code>, et que le chaîne en correspondance - était <code>'bc'</code>, alors cet argument vaudra 1.) + était <code>'abcd'</code>, et que le chaîne en correspondance + était <code>'bc'</code>, alors cet argument vaudra 1.) </td> </tr> <tr> @@ -142,14 +142,14 @@ Les arguments de cette fonction sont les suivants : </tbody> </table> -(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.) +(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.) -L'exemple suivant affectera `'abc - 12345 - #$*%'` à la variable `nouvelleChaine` : +L'exemple suivant affectera `'abc - 12345 - #$*%'` à la variable `nouvelleChaine` : ```js function remplaceur(correspondance, p1, p2, p3, decalage, chaine) { // p1 est non numérique, p2 numérique, et p3 non-alphanumérique - return [p1, p2, p3].join(' - '); + return [p1, p2, p3].join(' - '); } var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur); console.log(nouvelleChaine); // abc - 12345 - #$*% @@ -157,9 +157,9 @@ console.log(nouvelleChaine); // abc - 12345 - #$*% ## Exemples -### Définition de l'expression régulière dans `replace()` +### Définition de l'expression régulière dans `replace()` -Dans l'exemple suivant, l'expression régulière est définie dans `replace()` et inclut l'indicateur d'indifférence à la casse. +Dans l'exemple suivant, l'expression régulière est définie dans `replace()` et inclut l'indicateur d'indifférence à la casse. ```js var chn = 'Twas the night before Xmas...'; @@ -171,9 +171,9 @@ Cela affiche 'Twas the night before Christmas...'. > **Note :** Voir [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res) pour plus d'explications concernant les expressions régulières. -### Utilisation de `global` et `ignore` avec `replace()` +### Utilisation de `global` et `ignore` avec `replace()` -Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à `replace()` de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'. +Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à `replace()` de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'. ```js var re = /pommes/gi; @@ -186,7 +186,7 @@ Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'. ### Inverser des mots dans une chaîne de caractères -Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement `$1` et `$2`. +Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement `$1` et `$2`. ```js var re = /(\w+)\s(\w+)/; @@ -197,11 +197,11 @@ console.log(nouvChn); // Martin, Jean Cela affiche 'Martin, Jean'. -### Utilisation d'une fonction inline modifiant les caractères en correspondance +### Utilisation d'une fonction inline modifiant les caractères en correspondance -Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement. +Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement. -La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner. +La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner. ```js function styleFormatTiret(nomPropriete) { @@ -220,11 +220,11 @@ Du fait que nous voulons transformer davantage le résultat de la correspondance var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // ne fonctionne pas ``` -Ceci est dû au fait que `'$&'.toLowerCase()` serait d'abord évalué comme un littéral de chaîne (résultant en le même `'$&'`) avant d'utiliser les caractères comme modèle. +Ceci est dû au fait que `'$&'.toLowerCase()` serait d'abord évalué comme un littéral de chaîne (résultant en le même `'$&'`) avant d'utiliser les caractères comme modèle. -### Remplacer un degré Fahrenheit par son équivalent Celsius +### Remplacer un degré Fahrenheit par son équivalent Celsius -L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C. +L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C. L'expression régulière `test` vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, `p1`. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction `f2c()`. `f2c()` renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur `s///e` de Perl. @@ -254,7 +254,7 @@ x-xxx-xx-x- x_x_x___x___x___ ``` -**Sortie :**Un tableau d'objets. Un `'x'` dénote un état `'marche'`, un `'-'` symbolise un état '`arret`' et un `'_'` (blanc souligné) symbolise la longueur d'un état `'marche'`. +**Sortie :**Un tableau d'objets. Un `'x'` dénote un état `'marche'`, un `'-'` symbolise un état '`arret`' et un `'_'` (blanc souligné) symbolise la longueur d'un état `'marche'`. ```json [ @@ -278,7 +278,7 @@ chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){ console.log(tabRet); ``` -Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle `for`. +Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle `for`. ## Spécifications @@ -295,11 +295,11 @@ Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de ## Notes spécifiques à Firefox -- `flags` était un troisième argument non standard disponible uniquement dans Gecko : *str*.replace(_regexp_|_substr_, _newSubStr_|_function, flags_) -- À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque `replace()` est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à `0` ({{bug(501739)}}). -- À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard `flags` est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}). +- `flags` était un troisième argument non standard disponible uniquement dans Gecko : *str*.replace(_regexp_|_substr_, _newSubStr_|_function, flags_) +- À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque `replace()` est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à `0` ({{bug(501739)}}). +- À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard `flags` est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}). - À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard `flags` n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}). -- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus supporté ({{bug(1108382)}}). +- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus supporté ({{bug(1108382)}}). ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/string/search/index.md b/files/fr/web/javascript/reference/global_objects/string/search/index.md index 29c4facc8d..834955f2a2 100644 --- a/files/fr/web/javascript/reference/global_objects/string/search/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/search/index.md @@ -54,9 +54,9 @@ console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dan | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/slice/index.md b/files/fr/web/javascript/reference/global_objects/string/slice/index.md index 5360b4ab0e..59ed0e3937 100644 --- a/files/fr/web/javascript/reference/global_objects/string/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/slice/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/slice --- {{JSRef}} -La méthode **`slice()`** extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée. +La méthode **`slice()`** extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée. {{EmbedInteractiveExample("pages/js/string-slice.html")}} @@ -23,27 +23,27 @@ La méthode **`slice()`** extrait une section d'une chaine de caractères et la ### Paramètres - `indiceDebut` - - : L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (`longueurSource + indiceDebut`) où `longueurSource` est la longueur de la chaine de caractères (par exemple, si `indiceDebut` est -3, il sera traité comme `longueurSource - 3`). Si `indiceDebut` est supérieur à la longueur de la chaîne, `slice()` renvoie une chaîne vide. + - : L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (`longueurSource + indiceDebut`) où `longueurSource` est la longueur de la chaine de caractères (par exemple, si `indiceDebut` est -3, il sera traité comme `longueurSource - 3`). Si `indiceDebut` est supérieur à la longueur de la chaîne, `slice()` renvoie une chaîne vide. - `indiceFin` - - : Paramètre optionnel. Un indice base 0 _avant_ lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si `indiceFin` est absent, `slice()` extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (`longueurSource + indiceFin`) où `longueurSource` est la longueur de la chaine de caractères (par exemple s'il vaut `-3`, il sera traité comme `longueurSource - 3`) + - : Paramètre optionnel. Un indice base 0 _avant_ lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si `indiceFin` est absent, `slice()` extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (`longueurSource + indiceFin`) où `longueurSource` est la longueur de la chaine de caractères (par exemple s'il vaut `-3`, il sera traité comme `longueurSource - 3`) ### Valeur retournée -Une nouvelle chaîne de caractères contenant la section extraite de la chaîne. +Une nouvelle chaîne de caractères contenant la section extraite de la chaîne. ## Description -`slice()` extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne. +`slice()` extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne. -`slice()` extrait jusqu'à `indiceFin`, mais sans l'inclure. Par exemple, `chn.slice(1, 4)` extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3). +`slice()` extrait jusqu'à `indiceFin`, mais sans l'inclure. Par exemple, `chn.slice(1, 4)` extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3). -Par exemple, `chn.slice(2, -1)` extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères. +Par exemple, `chn.slice(2, -1)` extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères. ## Exemples -### Utilisation de `slice()` pour créer une nouvelle chaîne de caractères +### Utilisation de `slice()` pour créer une nouvelle chaîne de caractères -L'exemple suivant utilise `slice()` pour créer une nouvelle chaîne de caractères. +L'exemple suivant utilise `slice()` pour créer une nouvelle chaîne de caractères. ```js var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22 @@ -91,9 +91,9 @@ console.log(chn.slice(-11, -5)); // "st sur" | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée dans JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/substr/index.md b/files/fr/web/javascript/reference/global_objects/string/substr/index.md index 00eabdbffd..140407b8d7 100644 --- a/files/fr/web/javascript/reference/global_objects/string/substr/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/substr/index.md @@ -38,19 +38,19 @@ Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée. `substr()` extrait `longueur` caractères d'une `string`, en comptant à partir de l'indice `début`. -Si `début` est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à `chn.length`. +Si `début` est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à `chn.length`. -Si `début` est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à `-chn.length`. +Si `début` est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à `-chn.length`. Note : dans JScript de Microsoft, les valeurs négatives de l'argument `début` ne sont pas considérées comme faisant référence à la fin de la chaîne. -Si `longueur` est omise, `substr()` extrait les caractères jusqu'à la fin de la chaîne. +Si `longueur` est omise, `substr()` extrait les caractères jusqu'à la fin de la chaîne. -Si `longueur` est {{jsxref("undefined")}}, `substr()` extrait les caractères jusqu'à la fin de la chaîne. +Si `longueur` est {{jsxref("undefined")}}, `substr()` extrait les caractères jusqu'à la fin de la chaîne. -Si `longueur` est négative, elle est traitée comme 0. +Si `longueur` est négative, elle est traitée comme 0. -Pour `début` comme pour `longueur`, NaN est traité comme 0. +Pour `début` comme pour `longueur`, NaN est traité comme 0. ## Exemples @@ -77,14 +77,14 @@ if ('ab'.substr(-1) != 'b') { /** * Obtenir la sous-chaîne d'une chaîne * @param {entier} début où démarrer la sous-chaîne - * @param {entier} longueur combien de caractères à retourner + * @param {entier} longueur combien de caractères à retourner * @return {chaîne} */ String.prototype.substr = function(substr) { return function(début, longueur) { // Appel de la méthode originale return substr.call(this, - // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne + // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne // Ajuster le paramètre pour une valeur négative début < 0 ? this.length + début : début, longueur) diff --git a/files/fr/web/javascript/reference/global_objects/string/substring/index.md b/files/fr/web/javascript/reference/global_objects/string/substring/index.md index 5fbc2431f5..e5cc7f9e7d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/substring/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/substring/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/substring --- {{JSRef}} -La méthode **`substring()`** retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin. +La méthode **`substring()`** retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin. {{EmbedInteractiveExample("pages/js/string-substring.html")}} @@ -35,12 +35,12 @@ Une nouvelle chaîne de caractères qui correspond à la section souhaitée de l `substring` extrait des caractères de la chaîne courante à partir de `indiceA` jusqu'à `indiceB` (non compris). On a notamment : -- Si `indiceA` est égal à `indiceB`, `substring` retournera une chaîne vide. -- Si `indiceB` est omis, `substring` effectuera l'extraction des caractères jusqu'à la fin de la chaîne. +- Si `indiceA` est égal à `indiceB`, `substring` retournera une chaîne vide. +- Si `indiceB` est omis, `substring` effectuera l'extraction des caractères jusqu'à la fin de la chaîne. - Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0. - Si l'un des deux arguments est plus grand que `str.length`, il sera traité comme `str.length`. -Si `indiceA` est supérieur à `indiceB`, la fonction `substring()` intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : `str.substring(1, 0) == str.substring(0, 1)`. +Si `indiceA` est supérieur à `indiceB`, la fonction `substring()` intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : `str.substring(1, 0) == str.substring(0, 1)`. ## Exemples @@ -86,7 +86,7 @@ function replaceString(oldS, newS, fullS) { replaceString("World", "Web", "Brave New World"); ``` -Attention : ceci peut résulter en une boucle infinie si `oldS` est elle-même une sous-chaine de `newS` -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière : +Attention : ceci peut résulter en une boucle infinie si `oldS` est elle-même une sous-chaine de `newS` -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière : ```js function replaceString(oldS, newS,fullS){ @@ -141,9 +141,9 @@ Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsx | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md index 9eccd4d59d..9ace7a15e9 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md @@ -58,9 +58,9 @@ La méthode `toLocaleLowerCase()` renvoie la valeur de la chaîne de caractères | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017 | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md index 016286cab7..72e101c52d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md @@ -59,9 +59,9 @@ On notera également que la conversion ne repose pas sur une correspondance un | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md index abd97d98aa..c89fbeeff9 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md @@ -26,7 +26,7 @@ Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appela ## Description -La méthode `toLowerCase()` renvoie la valeur de la chaîne convertie en minuscules. `toLowerCase()` ne modifie pas la valeur de la chaîne courante. +La méthode `toLowerCase()` renvoie la valeur de la chaîne convertie en minuscules. `toLowerCase()` ne modifie pas la valeur de la chaîne courante. ## Exemples @@ -39,9 +39,9 @@ console.log( "ALPHABET".toLowerCase() ); // "alphabet" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tostring/index.md b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md index 630a4a4d32..2a7c2c4f29 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md @@ -30,7 +30,7 @@ L'objet {{jsxref("String")}} surcharge la méthode `toString()` de l'objet {{jsx ## Exemples -L'exemple suivant affiche la valeur textuelle d'un objet {{jsxref("String")}} : +L'exemple suivant affiche la valeur textuelle d'un objet {{jsxref("String")}} : ```js var x = new String("coucou monde"); @@ -42,9 +42,9 @@ console.log(x.toString()); // affiche "coucou monde" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md index efa4875d7d..875afc76f1 100644 --- a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase --- {{JSRef}} -La méthode **`toUpperCase()`** retourne la valeur de la chaîne courante, convertie en majuscules. +La méthode **`toUpperCase()`** retourne la valeur de la chaîne courante, convertie en majuscules. {{EmbedInteractiveExample("pages/js/string-touppercase.html")}} @@ -31,7 +31,7 @@ Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, p ## Description -La méthode `toUpperCase()` retourne la valeur de la chaîne convertie en majuscules. `toUpperCase` n'affecte pas la valeur de la chaîne elle-même. +La méthode `toUpperCase()` retourne la valeur de la chaîne convertie en majuscules. `toUpperCase` n'affecte pas la valeur de la chaîne elle-même. ## Exemples @@ -43,7 +43,7 @@ console.log( "alphabet".toUpperCase() ); // "ALPHABET" ### Convertir une valeur `this` en chaîne de caractères -Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur `this` : +Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur `this` : ```js var obj = { @@ -63,9 +63,9 @@ console.log(b); // Affiche 'TRUE' dans la console | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/trim/index.md b/files/fr/web/javascript/reference/global_objects/string/trim/index.md index a36df76b58..2e843dfbcd 100644 --- a/files/fr/web/javascript/reference/global_objects/string/trim/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/trim/index.md @@ -50,9 +50,9 @@ Si l'environnement utilisé ne possède pas cette méthode, il est possible de l ```js if (!String.prototype.trim) { - String.prototype.trim = function () { + String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); - }; + }; } ``` @@ -61,8 +61,8 @@ if (!String.prototype.trim) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.1. | -| {{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/trimend/index.md b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md index ded81deeb9..de4d19e334 100644 --- a/files/fr/web/javascript/reference/global_objects/string/trimend/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md @@ -39,7 +39,7 @@ String.prototype.trimRight.name === "trimEnd"; ## Exemples -L'exemple qui suit illustre comment afficher la chaîne " toto": +L'exemple qui suit illustre comment afficher la chaîne " toto": ```js var str = " toto "; diff --git a/files/fr/web/javascript/reference/global_objects/string/valueof/index.md b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md index e1ba2b7fd6..1ce3ec7c75 100644 --- a/files/fr/web/javascript/reference/global_objects/string/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md @@ -42,9 +42,9 @@ console.log(x.valueOf()); // affiche "Coucou monde" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md index 28b41fe086..e4f27b4425 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md @@ -25,7 +25,7 @@ La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué. ## Description -La méthode `[@@toPrimitive]()` de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet `Symbol` (le résultat sera donc un symbole au sens primitif). L'argument `hint` n'est pas utilisé. +La méthode `[@@toPrimitive]()` de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet `Symbol` (le résultat sera donc un symbole au sens primitif). L'argument `hint` n'est pas utilisé. Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler `[@@toPrimitive]()` car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue. @@ -34,7 +34,7 @@ Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir u | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md index 502ee237b5..fef4bac069 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md @@ -53,7 +53,7 @@ Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé ` | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------ | -| {{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}} | {{Spec2('ES2018')}} | | +| {{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}} | {{Spec2('ES2018')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/for/index.md b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md index febba50125..db03a448e0 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/for/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md @@ -69,7 +69,7 @@ Symbol.for("mdn.machin"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md index 164f5067d1..5693ca7ada 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md @@ -34,7 +34,7 @@ console.log([] instanceof MonArray); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/index.md b/files/fr/web/javascript/reference/global_objects/symbol/index.md index 3bc071ea70..3da4598453 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/index.md @@ -110,7 +110,7 @@ En plus des symboles que vous pouvez créer, JavaScript possède certains symbol - {{jsxref("Symbol.hasInstance")}} - : Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}. - {{jsxref("Symbol.isConcatSpreadable")}} - - : Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via {{jsxref("Array.prototype.concat()")}}. + - : Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via {{jsxref("Array.prototype.concat()")}}. - {{jsxref("Symbol.unscopables")}} - : Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with). - {{jsxref("Symbol.species")}} diff --git a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md index 503c3b97af..581b21eecc 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable --- {{JSRef}} -Le symbole connu **`Symbol.isConcatSpreadable`** est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode {{jsxref("Array.prototype.concat()")}}. +Le symbole connu **`Symbol.isConcatSpreadable`** est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode {{jsxref("Array.prototype.concat()")}}. {{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md index d9963f9a23..e212249f45 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md @@ -48,7 +48,7 @@ Symbol.keyFor(Symbol.iterator); // undefined | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/match/index.md b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md index ec609b6c6a..9295c1e6bb 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/match/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md @@ -34,7 +34,7 @@ Le code suivant renverra une exception {{jsxref("TypeError")}} : // et que Symbol.match n'a pas été modifié. ``` -Cependant, si `Symbol.match` vaut `false`, cette vérification `isRegExp` indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes `startsWith` et `endsWith` ne déclencheront donc pas d'exception `TypeError`. +Cependant, si `Symbol.match` vaut `false`, cette vérification `isRegExp` indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes `startsWith` et `endsWith` ne déclencheront donc pas d'exception `TypeError`. ```js var re = /toto/; @@ -48,7 +48,7 @@ re[Symbol.match] = false; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md index ef0df351c6..b09acf592b 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md @@ -37,7 +37,7 @@ Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@m | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md index 6ec4f7d191..8bd9547ccf 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/search/index.md b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md index ac3ddb1ae3..64e9fd9c6b 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/search/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/species/index.md b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md index 8301da4fa2..0b04312523 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/species/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md @@ -43,7 +43,7 @@ console.log(mapped instanceof Array); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/split/index.md b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md index b1e4f5b419..68dbf7c99c 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/split/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md index 8d73e8466e..52d1bc8104 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md @@ -55,7 +55,7 @@ console.log(obj2 + ""); // true -- hint vaut "default" | Spécification | Etat | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md index 6f9bcd119f..ee225a1b2f 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md @@ -54,7 +54,7 @@ Symbol.for("toto").toString() // "Symbol(toto)" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md index 89667ea0f1..6b4e3c1b1a 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md @@ -64,7 +64,7 @@ Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md index dcfc3a91e1..8808081eb0 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md @@ -26,7 +26,7 @@ En définissant une propriété comme `true` dans un objet `unscopables`, cela e ## Exemples -Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. +Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. ```js var keys = []; @@ -64,7 +64,7 @@ with(obj) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md index f202db038f..a16eac6605 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md @@ -34,7 +34,7 @@ JavaScript appelle la méthode `valueOf` afin de convertir l'objet en une valeur | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md index 8e02ba78e1..de9afe39e0 100644 --- a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md index 1046aa4f23..7ad4b7deb3 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md @@ -55,7 +55,7 @@ console.log(eArr.next().value); // 50 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md index 4037082e08..20fe587705 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md @@ -60,7 +60,7 @@ class MonTableauTypé extends Uint8Array { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md index 4c1500fe83..22dff86062 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md @@ -37,7 +37,7 @@ uint16.buffer; // ArrayBuffer { byteLength: 8 } | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md index 16b00bf27f..836e40c1ea 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md @@ -44,7 +44,7 @@ uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md index 1b667e67de..e9af5a0584 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md @@ -39,7 +39,7 @@ uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md index f2ae06a0e6..3c2e7159a1 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md @@ -44,7 +44,7 @@ Float64Array.BYTES_PER_ELEMENT; // 8 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Spécification englobée par ECMAScript 6. | | {{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md index 4a2b5aa7c7..e9d59dc71b 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin --- {{JSRef}} -La méthode **`copyWithin()`** permet de copier des éléments d'un tableau dans le tableau typé à partir de la position `cible`. Les éléments copiés sont ceux contenus entre les index `début` et `fin`. L'argument `fin` est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}_._ _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +La méthode **`copyWithin()`** permet de copier des éléments d'un tableau dans le tableau typé à partir de la position `cible`. Les éléments copiés sont ceux contenus entre les index `début` et `fin`. L'argument `fin` est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}_._ _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}} @@ -55,7 +55,7 @@ console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md index 9e1217d1d1..ec544a6fcc 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md @@ -74,7 +74,7 @@ console.log(eArr.next().value); // [4, 50] {{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}} </td> <td>{{Spec2('ESDraft')}}</td> - <td> </td> + <td></td> </tr> </tbody> </table> diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md index 64f2525a90..099d11914b 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md @@ -80,7 +80,7 @@ new Uint8Array([12, 54, 18, 130, 44]).every(elem => elem >= 10); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md index b9b1d668b2..f62624744c 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md @@ -69,7 +69,7 @@ if (!Uint8Array.prototype.fill) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md index ba1ac88002..2c7e7cca30 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md @@ -43,7 +43,7 @@ La méthode `filter()` appelle une fonction `callback` appelée une fois pour ch 2. l'indice de l'élément 3. le tableau typé courant -Si le paramètre `thisArg` est fourni, il sera utilisé comme objet `this` lors de l'appel de la fonction `callback`. Sinon, la valeur `undefined` sera utilisée à la place. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur this au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si le paramètre `thisArg` est fourni, il sera utilisé comme objet `this` lors de l'appel de la fonction `callback`. Sinon, la valeur `undefined` sera utilisée à la place. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur this au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). `filter()` ne modifie pas le tableau typé sur lequel elle a été appelée. @@ -77,7 +77,7 @@ new Uint8Array([12, 5, 8, 130, 44]).filter(élém => élém >= 10); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md index d76794588c..6c91af3a50 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md @@ -82,7 +82,7 @@ console.log(uint8.find(estPremier)); // 5 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md index 5a47252cf2..22b903d990 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md @@ -83,7 +83,7 @@ console.log(uint16.findIndex(estPremier)); // 2 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md index 5e8e660ebc..3783b29df9 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md @@ -79,7 +79,7 @@ new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md index 492c0b9676..14cf6cc5fa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md @@ -52,7 +52,7 @@ new Float64Array([NaN]).includes(NaN); // true; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ES7')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/index.md index a3beb0bec7..af2efbdd16 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray --- {{JSRef}} -Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau pour manipuler [un tampon (_buffer_) de données binaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer). `TypedArray` n'est pas une propriété globale, il n'existe pas non plus de constructeur `TypedArray`. En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (_typed arrays_) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés. +Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau pour manipuler [un tampon (_buffer_) de données binaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer). `TypedArray` n'est pas une propriété globale, il n'existe pas non plus de constructeur `TypedArray`. En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (_typed arrays_) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés. {{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}} @@ -48,7 +48,7 @@ Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau p ## Description -ECMAScript 2015 (ES6) définit un constructeur `%TypedArray%` qui est un `[[Prototype]]` de tous les constructeurs _TypedArray_. Ce constructeur n'est pas accessible directement. Il n'existe pas de `%TypedArray%` global ou de propriété `TypedArray`. Il est uniquement accessible via `Object.getPrototypeOf(Int8Array.prototype)` ou avec les méthodes semblables. L'ensemble des différents constructeurs *TypedArray*s hérite de propriétés communes de la fonction `%TypedArray%`. De plus, tous les prototypes des tableaux typés (_TypedArray_`.prototype`) ont `%TypedArray%.prototype` pour `[[Prototype]]`. +ECMAScript 2015 (ES6) définit un constructeur `%TypedArray%` qui est un `[[Prototype]]` de tous les constructeurs _TypedArray_. Ce constructeur n'est pas accessible directement. Il n'existe pas de `%TypedArray%` global ou de propriété `TypedArray`. Il est uniquement accessible via `Object.getPrototypeOf(Int8Array.prototype)` ou avec les méthodes semblables. L'ensemble des différents constructeurs *TypedArray*s hérite de propriétés communes de la fonction `%TypedArray%`. De plus, tous les prototypes des tableaux typés (_TypedArray_`.prototype`) ont `%TypedArray%.prototype` pour `[[Prototype]]`. Le constructeur `%TypedArray%` en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression `new` renverra `TypeError`, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison `%TypedArray%` est uniquement utile dans les fonctions d'émulation (_polyfill_) our pour les propriétés des différents constructeurs _TypedArray_. @@ -225,11 +225,11 @@ Toutes les instances de *TypedArray*s héritent de {{jsxref("TypedArray.prototyp La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} : ```js -var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array]; +var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array]; for (var k in typedArrayTypes){ for (var v in Array.prototype){ if (Array.prototype.hasOwnProperty(v) && - !typedArrayTypes[k].prototype.hasOwnProperty(v)){ + !typedArrayTypes[k].prototype.hasOwnProperty(v)){ typedArrayTypes[k].prototype[v] = Array.prototype[v]; } } diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md index d849bb21b8..85eb530cc8 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md @@ -53,7 +53,7 @@ uint8.indexOf(2, -3); // 0 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md index afa7c3fb66..f53fd1e68d 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md @@ -60,7 +60,7 @@ Mieux vaut ne pas ajouter de prothèses pour `TypedArray.prototype` si le moteur | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md index 70f303d5b3..2ff920b1aa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md @@ -59,7 +59,7 @@ console.log(eArr.next().value); // 4 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md index e23c8468b6..1715e8fd3d 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf --- {{JSRef}} -La méthode **`lastIndexOf()`** renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de `indexDépart`. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, *TypedArray* correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +La méthode **`lastIndexOf()`** renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de `indexDépart`. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, *TypedArray* correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}} @@ -54,7 +54,7 @@ uint8.lastIndexOf(2, -1); // 3 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md index 0497fdae14..dfe52caaaa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md @@ -44,7 +44,7 @@ uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md index 3445e8b589..f2d80fb57c 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md @@ -36,7 +36,7 @@ La méthode **`map()`** crée un nouveau tableau typé dont les éléments sont - : Le tableau typé sur lequel `map()` a été appelée. - `thisArg` - - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'appel à `callback`. + - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'appel à `callback`. ### Valeur de retour @@ -48,7 +48,7 @@ La méthode `map()` appelle la fonction `callback()` passée en argument une foi `callback()` est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant. -Si un paramètre `thisArg` est fourni pour `map()`, il sera passé à `callback` pour les différents appels et servira de valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur `this`. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si un paramètre `thisArg` est fourni pour `map()`, il sera passé à `callback` pour les différents appels et servira de valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur `this`. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). `map()` ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction `callback` qui pourra éventuellement modifier le tableau). diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md index 6c3fcf8f42..9e928d0fcb 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md @@ -43,7 +43,7 @@ Float64Array.name; // "Float64Array" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md index 820f23c6c0..397491b75a 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md @@ -65,7 +65,7 @@ var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md index 3925756143..c433730bd8 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md @@ -49,7 +49,7 @@ L'appel à `reduceRight` utilisant la fonction `callback` ressemble à : ```js typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) { - // ... + // ... }); ``` @@ -71,7 +71,7 @@ var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md index 7fe0172573..1db37cde37 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md @@ -40,7 +40,7 @@ console.log(uint8); // Uint8Array [3, 2, 1] | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md index 91c4412769..dccda957f6 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md @@ -56,7 +56,7 @@ console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ] | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Englobée avec ECMAScript 6. | | {{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md index 6c12dce8c1..6b771b9e42 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -74,7 +74,7 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md index 2ac4e5d3f4..25bad9e414 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md @@ -82,9 +82,9 @@ Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc un ```js // https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice if (!Uint8Array.prototype.some) { - Object.defineProperty(Uint8Array.prototype, 'some', { - value: Array.prototype.some - }); + Object.defineProperty(Uint8Array.prototype, 'some', { + value: Array.prototype.some + }); } ``` @@ -95,7 +95,7 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md index 816d1cb388..12c8671593 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md @@ -60,7 +60,7 @@ nombres.sort(comparaisonNombres); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md index 4a12d09d6d..2faebb9cbe 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray --- {{JSRef}} -La méthode `subarray()` permet de renvoyer un nouvel objet _TypedArray_ basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet _TypedArray_ courant. Le paramètre `début` est à considérer au sens large et le paramètre `end` est à considérer au sens strict. _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray). +La méthode `subarray()` permet de renvoyer un nouvel objet _TypedArray_ basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet _TypedArray_ courant. Le paramètre `début` est à considérer au sens large et le paramètre `end` est à considérer au sens strict. _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}} @@ -57,7 +57,7 @@ console.log(sub); // Uint8Array [ 1, 2, 3, 0 ] | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 6. | | {{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md index 683c501395..1ef8a54a92 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md @@ -49,7 +49,7 @@ uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md index aa522a3cfd..8cf0f8a0fa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md @@ -50,7 +50,7 @@ numbers.toString(); // "[object Uint8Array]" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md index de4ab82e80..8f63c07488 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md @@ -59,7 +59,7 @@ console.log(eArr.next().value); // 50 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typeerror/index.md b/files/fr/web/javascript/reference/global_objects/typeerror/index.md index 712e7799b6..b8b971d0e2 100644 --- a/files/fr/web/javascript/reference/global_objects/typeerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/typeerror/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypeError --- {{JSRef}} -L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeur n'est pas du type attendu. +L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeur n'est pas du type attendu. ## Syntaxe @@ -29,7 +29,7 @@ L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeu ## Description -Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu. +Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu. ## Propriétés @@ -38,7 +38,7 @@ Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est ## Méthodes -L'objet global `TypeError` ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes. +L'objet global `TypeError` ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes. ## Instances de TypeError @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/undefined/index.md b/files/fr/web/javascript/reference/global_objects/undefined/index.md index 18917f5b36..63468b42c6 100644 --- a/files/fr/web/javascript/reference/global_objects/undefined/index.md +++ b/files/fr/web/javascript/reference/global_objects/undefined/index.md @@ -50,7 +50,7 @@ var x; if (x === undefined) { // ces instructions seront exécutées } -if (x !== undefined) { +if (x !== undefined) { // ces instructions ne seront pas exécutées } ``` @@ -59,7 +59,7 @@ if (x !== undefined) { ### L'opérateur `typeof` et `undefined` -L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé : +L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé : ```js var x; @@ -103,9 +103,9 @@ if (y === void 0) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1', '#sec-4.3.9', 'undefined')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-undefined', 'undefined')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-undefined', 'undefined')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-undefined', 'undefined')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-undefined', 'undefined')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md index 4fbde04d8b..71de218cc3 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md @@ -46,7 +46,7 @@ wm.has(window); // Renvoie false. L'objet window n'est plus dans la WeakMap. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md index 6064f0c769..155f9089fa 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md @@ -45,7 +45,7 @@ wm.get("machin"); // Renvoie undefined. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md index 4cfc9faac8..692813560b 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md @@ -45,7 +45,7 @@ wm.has("machin"); // renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakref/index.md b/files/fr/web/javascript/reference/global_objects/weakref/index.md index 23a9148e60..7c8e09e10d 100644 --- a/files/fr/web/javascript/reference/global_objects/weakref/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakref/index.md @@ -10,7 +10,7 @@ Un objet **`WeakRef`** permet de tenir une référence faible vers un autre obje ## Description -Un objet `WeakRef` contient une référence faible vers un objet, appelé _cible_ ou _référent_. Une _référence faible_ vers un objet est une référence qui n'empêche pas l'objet d'être récupéré par le ramasse-miettes. À l'inverse, une référence normale (aussi qualifiée de _forte_) implique de conserver un objet en mémoire. Lorsqu'un objet n'a plus de référence forte envers lui, le ramasse-miettes du moteur JavaScript peut détruire l'objet et récupérer la mémoire correspondante. Une fois que cela est fait, on ne peut plus accéder à l'objet depuis une référence faible. +Un objet `WeakRef` contient une référence faible vers un objet, appelé _cible_ ou _référent_. Une _référence faible_ vers un objet est une référence qui n'empêche pas l'objet d'être récupéré par le ramasse-miettes. À l'inverse, une référence normale (aussi qualifiée de _forte_) implique de conserver un objet en mémoire. Lorsqu'un objet n'a plus de référence forte envers lui, le ramasse-miettes du moteur JavaScript peut détruire l'objet et récupérer la mémoire correspondante. Une fois que cela est fait, on ne peut plus accéder à l'objet depuis une référence faible. > **Note :** Voir la section [À éviter si possible](#à_éviter_si_possible) ci-après. Une utilisation correcte et pertinente de `WeakRef` nécessite une réflexion appuyée. C'est un objet qu'il conviendra d'éviter si possible. diff --git a/files/fr/web/javascript/reference/global_objects/weakset/add/index.md b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md index e50ed53215..ddbaff6335 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md @@ -50,7 +50,7 @@ ws.add(1); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md index 05a92dcddc..ae0cbe8829 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md @@ -49,7 +49,7 @@ ws.has(window); // Renvoie false, window n'appartient plus au WeakSet. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakset/has/index.md b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md index c93b182bb2..58a388c0a3 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md @@ -47,7 +47,7 @@ mySet.has(obj); // renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md index be5311cebf..72adbbf101 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md @@ -37,7 +37,7 @@ _Le constructeur `CompileError` ne possède aucune propriété propre. En revanc - `WebAssembly.CompileError.prototype.constructor` - : Définit la fonction qui crée le prototype d'une instance. - {{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}} - - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que l'instance devrait fournir sa propre propriété `message`, pour [SpiderMonkey](/fr/docs/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}. + - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que l'instance devrait fournir sa propre propriété `message`, pour [SpiderMonkey](/fr/docs/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}. - {{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}} - : Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}. - {{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}} diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md index 5328b248d6..087ecff6d7 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md @@ -34,7 +34,7 @@ Un objet `Promise` dont la valeur de résolution est un objet {{jsxref("WebAssem ## Exemples -Dans l'exemple suivant (également disponible sur GitHub : [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction `compileStreaming()` acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue. +Dans l'exemple suivant (également disponible sur GitHub : [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction `compileStreaming()` acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue. ```js var importObject = { imports: { imported_func: arg => console.log(arg) } }; diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/index.md index 5ee009f9cb..3096ed27bd 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/index.md @@ -21,7 +21,7 @@ L'objet JavaScript **`WebAssembly`** est un objet global qui agit comme un espac L'objet `WebAssembly` est notamment utilisé pour : - Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} -- Créer des zones mémoires et des instances de tableaux grâce aux constructeurs {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}. +- Créer des zones mémoires et des instances de tableaux grâce aux constructeurs {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}. - Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}. ## Méthodes @@ -31,7 +31,7 @@ L'objet `WebAssembly` est notamment utilisé pour : - {{jsxref("WebAssembly.instantiateStreaming()")}} - : Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (_streamed source_). Elle renvoie à la fois un objet `Module` et sa première `Instance`. - {{jsxref("WebAssembly.compile()")}} - - : Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de *bytecode* WebAssembly, l'instanciation doit alors être effectuée dans une autre étape. + - : Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de *bytecode* WebAssembly, l'instanciation doit alors être effectuée dans une autre étape. - {{jsxref("WebAssembly.compileStreaming()")}} - : Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (_streamed source_). L'instanciation devra alors être réalisée avec une autre étape. - {{jsxref("WebAssembly.validate()")}} diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md index 9c01958668..bd4ff708a7 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md @@ -36,7 +36,7 @@ La fonction **`WebAssembly.instantiate()`** permet de compiler et d'instancier d Une promesse qui est résoluee en un objet qui contient deux champs : -- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à {{domxref("Worker.postMessage", "postMessage()")}} ou via [un cache IndexedDB](/fr/docs/WebAssembly/Caching_modules). +- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à {{domxref("Worker.postMessage", "postMessage()")}} ou via [un cache IndexedDB](/fr/docs/WebAssembly/Caching_modules). - `instance` : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble [des fonctions WebAssembly exportées](/fr/docs/WebAssembly/Exported_functions). #### Exceptions @@ -70,7 +70,7 @@ Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}. ### Première forme -Après avoir récupéré le _bytecode_ WebAssembly grâce à `fetch()`, on compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) via l'instance. +Après avoir récupéré le _bytecode_ WebAssembly grâce à `fetch()`, on compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) via l'instance. ```js var importObject = { diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md index 783fc228bf..e641c6060d 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md @@ -40,7 +40,7 @@ Un objet `Promise` dont la valeur de résolution est un objet `ResultObject` con ## Examples -Dans l'exemple suivant (également disponible sur GitHub : [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()` acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue. +Dans l'exemple suivant (également disponible sur GitHub : [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()` acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue. ```js var importObject = { imports: { imported_func: arg => console.log(arg) } }; diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md index 5872525372..c8b351cafa 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md @@ -40,9 +40,9 @@ Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la mét ```js const bytesPerPage = 64 * 1024; -console.log(memory.buffer.byteLength / bytesPerPage); // "1" -console.log(memory.grow(1)); // "1" -console.log(memory.buffer.byteLength / bytesPerPage); // "2" +console.log(memory.buffer.byteLength / bytesPerPage); // "1" +console.log(memory.grow(1)); // "1" +console.log(memory.buffer.byteLength / bytesPerPage); // "2" ``` On voit ici que la valeur de `grow()` indique l'espace utilisé avant l'agrandissement de la mémoire. diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md index ce946737a8..56a6cd1923 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md @@ -18,7 +18,7 @@ Le constructeur `WebAssembly.Module()` peut être appelé de façon synchrone po ## Syntaxe -> **Attention :** La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur `Module()` doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}. +> **Attention :** La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur `Module()` doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}. var monModule = new WebAssembly.Module(bufferSource); diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md index 3d263884fe..a7d594be8e 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get --- {{JSRef}} -La méthode **`get()`**, rattachéee au prototype de {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau. +La méthode **`get()`**, rattachéee au prototype de {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau. ## Syntaxe diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md index 6e2380a974..41112e76ea 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md @@ -87,9 +87,9 @@ Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à l ```js WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) .then(function(obj) { - console.log(tbl.length); // "2" - console.log(tbl.get(0)()); // "42" - console.log(tbl.get(1)()); // "83" + console.log(tbl.length); // "2" + console.log(tbl.get(0)()); // "42" + console.log(tbl.get(1)()); // "83" }); ``` diff --git a/files/fr/web/javascript/reference/iteration_protocols/index.md b/files/fr/web/javascript/reference/iteration_protocols/index.md index a6e2b15f68..2d387cbde3 100644 --- a/files/fr/web/javascript/reference/iteration_protocols/index.md +++ b/files/fr/web/javascript/reference/iteration_protocols/index.md @@ -18,7 +18,7 @@ Il existe deux protocoles concernant l'itération : [le protocole « itérable ## Le protocole « itérable » -Le protocole « **itérable** » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement. +Le protocole « **itérable** » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement. Afin d'être **itérable**, un objet doit implémenter la méthode **`@@iterator`**, cela signifie que l'objet (ou un des objets de [sa chaîne de prototypes](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)) doit avoir une propriété avec une clé **`@@iterator`** qui est accessible via {{jsxref("Symbol.iterator")}} : @@ -360,7 +360,7 @@ unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-iteration', 'Iteration')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-iteration', 'Iteration')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-iteration', 'Iteration')}} | {{Spec2('ESDraft')}} | | ## Voir aussi diff --git a/files/fr/web/javascript/reference/operators/assignment/index.md b/files/fr/web/javascript/reference/operators/assignment/index.md index b793a0aafb..8cf99afbfe 100644 --- a/files/fr/web/javascript/reference/operators/assignment/index.md +++ b/files/fr/web/javascript/reference/operators/assignment/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Assignement --- {{jsSidebar("Operators")}} -L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables. +L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables. {{EmbedInteractiveExample("pages/js/expressions-assignment.html")}} diff --git a/files/fr/web/javascript/reference/operators/async_function/index.md b/files/fr/web/javascript/reference/operators/async_function/index.md index 38334b17ee..cf1ed3b31a 100644 --- a/files/fr/web/javascript/reference/operators/async_function/index.md +++ b/files/fr/web/javascript/reference/operators/async_function/index.md @@ -72,8 +72,8 @@ add(10).then(v => { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}} | | +| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}} | | | {{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2017')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/class/index.md b/files/fr/web/javascript/reference/operators/class/index.md index bb3c259708..6831186b85 100644 --- a/files/fr/web/javascript/reference/operators/class/index.md +++ b/files/fr/web/javascript/reference/operators/class/index.md @@ -70,9 +70,9 @@ Toto.name; // "TotoNommé" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.md b/files/fr/web/javascript/reference/operators/comma_operator/index.md index e227672b69..7308d2810c 100644 --- a/files/fr/web/javascript/reference/operators/comma_operator/index.md +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.md @@ -71,9 +71,9 @@ function maFonction () { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.md b/files/fr/web/javascript/reference/operators/conditional_operator/index.md index d48dfca9fd..5546463ede 100644 --- a/files/fr/web/javascript/reference/operators/conditional_operator/index.md +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.md @@ -9,7 +9,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel --- {{jsSidebar("Operators")}} -L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}. +L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}. {{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}} @@ -28,7 +28,7 @@ L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui c ## Description -SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration : +SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration : ```js "Le prix est : " + (estMembre ? "15 €" : "30 €") diff --git a/files/fr/web/javascript/reference/operators/function/index.md b/files/fr/web/javascript/reference/operators/function/index.md index 34213fa6f1..198e0ea95d 100644 --- a/files/fr/web/javascript/reference/operators/function/index.md +++ b/files/fr/web/javascript/reference/operators/function/index.md @@ -107,9 +107,9 @@ var b = "monde"; | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES3', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.md b/files/fr/web/javascript/reference/operators/function_star_/index.md index 2585ad0c1b..49cb949b65 100644 --- a/files/fr/web/javascript/reference/operators/function_star_/index.md +++ b/files/fr/web/javascript/reference/operators/function_star_/index.md @@ -51,7 +51,7 @@ var x = function*(y) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/grouping/index.md b/files/fr/web/javascript/reference/operators/grouping/index.md index 9dc960ef06..472712355a 100644 --- a/files/fr/web/javascript/reference/operators/grouping/index.md +++ b/files/fr/web/javascript/reference/operators/grouping/index.md @@ -48,9 +48,9 @@ a * c + b * c // 9 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/in/index.md b/files/fr/web/javascript/reference/operators/in/index.md index cb4f40c8e2..75a0dd1f88 100644 --- a/files/fr/web/javascript/reference/operators/in/index.md +++ b/files/fr/web/javascript/reference/operators/in/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in --- {{jsSidebar("Operators")}} -L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype). +L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype). {{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}} @@ -45,14 +45,14 @@ var ma_chaine = new String("corail"); "length" in ma_chaine // renvoie true // Objets personnalisés -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; "marque" in voiture // renvoie true "modèle" in voiture // renvoie true "marque" in voiture // renvoie true "Accord" in voiture // renvoie false ``` -L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur `String`, mais pas une chaîne littérale. +L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur `String`, mais pas une chaîne littérale. ```js var couleur1 = new String("vert"); @@ -66,7 +66,7 @@ var couleur2 = "corail"; Si une propriété est supprimée avec l'opérateur [`delete`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete), l'opérateur `in` renvoie `false` pour cette propriété. ```js -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; delete voiture.marque; "marque" in voiture // renvoie false @@ -78,7 +78,7 @@ delete arbres[3]; Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur `in` renverra `true` pour cette propriété. ```js -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; voiture.marque = undefined; "marque" in voiture // renvoie true diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.md b/files/fr/web/javascript/reference/operators/instanceof/index.md index 9140ba2031..8cbdbe07ae 100644 --- a/files/fr/web/javascript/reference/operators/instanceof/index.md +++ b/files/fr/web/javascript/reference/operators/instanceof/index.md @@ -80,26 +80,26 @@ Cependant, les objets créés à partir de littéraux objets sont une exception ```js var chaîneSimple = "Une chaîne simple"; -var maChaîne = new String(); +var maChaîne = new String(); var newChaîne = new String("Chaîne créée avec un constructeur"); -var maDate = new Date(); -var monObjet = {}; +var maDate = new Date(); +var monObjet = {}; var monNonObjet = Object.create(null); chaîneSimple instanceof String; //false car le prototype vaut undefined -maChaîne instanceof String; // true +maChaîne instanceof String; // true newChaîne instanceof String; // true -maChaîne instanceof Object; // true +maChaîne instanceof Object; // true monObjet instanceof Object; // true, bien que le protoype soit undefined -({}) instanceof Object; // true, comme pour le cas précédent +({}) instanceof Object; // true, comme pour le cas précédent monNonObjet instance Object; // false -maChaîne instanceof Date; // false +maChaîne instanceof Date; // false -maDate instanceof Date; // true -maDate instanceof Object; // true -maDate instanceof String; // false +maDate instanceof Date; // true +maDate instanceof Object; // true +maDate instanceof String; // false ``` ### Démonstration que `mavoiture` est de type `Voiture` et de type `Object` diff --git a/files/fr/web/javascript/reference/operators/new.target/index.md b/files/fr/web/javascript/reference/operators/new.target/index.md index cec1e15f69..2c69716ec5 100644 --- a/files/fr/web/javascript/reference/operators/new.target/index.md +++ b/files/fr/web/javascript/reference/operators/new.target/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/new.target --- {{JSSidebar("Operators")}} -La syntaxe **`new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}. +La syntaxe **`new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}. {{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}} @@ -77,7 +77,7 @@ var d = new D(); // function D() | Spécification | État | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/new/index.md b/files/fr/web/javascript/reference/operators/new/index.md index 7a0424c8fa..ec9e35412d 100644 --- a/files/fr/web/javascript/reference/operators/new/index.md +++ b/files/fr/web/javascript/reference/operators/new/index.md @@ -34,7 +34,7 @@ Le mot-clé `new`, utilisé avec une fonction, applique les 4 étapes suivantes ## Description -La création d'un objet personnalisé se fait en deux étapes : +La création d'un objet personnalisé se fait en deux étapes : 1. Définition du type d'objet en écrivant une fonction. 2. Création d'une instance de l'objet avec `new`. @@ -74,9 +74,9 @@ console.log(voiture2.couleur); // couleur standard ## Exemples -### Exemple : type d'objet et instance d'objet +### Exemple : type d'objet et instance d'objet -Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante : +Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante : ```js function Voiture(marque, modèle, année) { @@ -86,7 +86,7 @@ function Voiture(marque, modèle, année) { } ``` -À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante : +À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante : ```js ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); @@ -94,15 +94,15 @@ ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); Cette instruction crée l'objet `ma_voiture` et assigne les valeurs spécifiées à ses propriétés. La valeur de `ma_voiture.marque` est alors la chaîne `"Volkswagen"`, celle de `ma_voiture.année` est l'entier 1997, et ainsi de suite. -Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple : +Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple : ```js voiture_de_ken = new Voiture("Nissan", "300ZX", 1992); ``` -### Exemple : propriété d'objet qui est elle-même un autre objet +### Exemple : propriété d'objet qui est elle-même un autre objet -Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante : +Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante : ```js function Personne(nom, age, surnom) { @@ -112,14 +112,14 @@ function Personne(nom, age, surnom) { } ``` -Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante : +Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante : ```js rand = new Personne("Rand McNally", 33, "Randy"); ken = new Personne("Ken Jones", 39, "Kenny"); ``` -Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci : +Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci : ```js function Voiture(marque, modèle, année, propriétaire) { @@ -130,14 +130,14 @@ function Voiture(marque, modèle, année, propriétaire) { } ``` -Pour instancier les nouveaux objets, vous utiliserez ensuite : +Pour instancier les nouveaux objets, vous utiliserez ensuite : ```js voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand); voiture2 = new Voiture("Nissan", "300ZX", 1992, ken); ``` -Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante : +Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante : ```js voiture2.propriétaire.nom @@ -147,10 +147,10 @@ voiture2.propriétaire.nom | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md index d9b1e5e3b4..475647ced4 100644 --- a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md @@ -13,9 +13,9 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator --- {{JSSidebar("Operators")}} -L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon. +L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon. -Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples. +Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples. {{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}} @@ -27,7 +27,7 @@ Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Refere ### Utilisation de l'opérateur de coalescence des nuls -Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`. +Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`. ```js const valeurNulle = null; @@ -54,7 +54,7 @@ let toto; let unTexteBateau = toto || 'Coucou !'; ``` -Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides. +Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides. ```js let compteur = 0; @@ -66,7 +66,7 @@ console.log(qté); // 42 et non 0 console.log(message); // "Coucou !" et non "" ``` -L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) : +L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) : ```js let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy) @@ -80,7 +80,7 @@ console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined) ### Court-circuitage -À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`. +À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`. ```js function A() { console.log('A a été appelée'); return undefined; } @@ -99,7 +99,7 @@ console.log( B() ?? C() ); ### Pas de chaînage possible avec les opérateurs AND ou OR -Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError). +Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError). ```js example-bad null || undefined ?? "toto"; // soulève une SyntaxError @@ -114,7 +114,7 @@ Cependant, fournir des parenthèses pour indiquer explicitement la priorité est ### Relation avec l'opérateur de chaînage optionnel (`?.`) -Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`. +Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`. ```js let toto = { uneProprieteToto: "coucou" }; @@ -137,5 +137,5 @@ console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined - [_Falsy values_ (Valeurs équivalentes à `false` dans un contexte booléen)](/fr/docs/Glossaire/Falsy) - [Opérateur de chaînage optionnel (_optional chaining_)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) -- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR) +- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR) - [Valeurs par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments) diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.md b/files/fr/web/javascript/reference/operators/object_initializer/index.md index 3c8d5deb28..a42a00729f 100644 --- a/files/fr/web/javascript/reference/operators/object_initializer/index.md +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.md @@ -287,7 +287,7 @@ La notation utilisant un littéral objet n'est pas identique à celle utilisée | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | | {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | [Ajout des _getter_ et](/fr/docs/Web/JavaScript/Reference/Functions/get) _[setter](/fr/docs/Web/JavaScript/Reference/Functions/set)_ (accesseur/mutateur). | | {{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ES2015')}} | Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés. | -| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.md b/files/fr/web/javascript/reference/operators/optional_chaining/index.md index 5a6d39da9b..7c0609b543 100644 --- a/files/fr/web/javascript/reference/operators/optional_chaining/index.md +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.md @@ -41,7 +41,7 @@ let nestedProp = obj.premier && obj.premier.second; La valeur de `obj.premier` est confirmée comme n'étant pas `null` (ni `undefined`) avant que d'accéder à la valeur de `obj.premier.second`. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement `obj.premier.second` directement sans vérifier `obj.premier`. -Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` : +Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` : ```js let nestedProp = obj.premier?.second; @@ -111,7 +111,7 @@ let nestedProp = obj?.['propName']; let objet = {}; objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment -### Accès aux éléments de tableau avec le chaînage optionnel +### Accès aux éléments de tableau avec le chaînage optionnel let élément = arr?.[42]; @@ -159,7 +159,7 @@ let villeDuClient = client.details?.adresse?.ville; let durée = vacations.trip?.getTime?.(); ``` -### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator) +### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator) L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée : diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.md b/files/fr/web/javascript/reference/operators/property_accessors/index.md index c71814b931..af68164c0e 100644 --- a/files/fr/web/javascript/reference/operators/property_accessors/index.md +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.md @@ -32,7 +32,7 @@ obtenir = objet.propriété; objet.propriété = définir; ``` -`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas. +`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas. ```js document.createElement('pre'); @@ -61,7 +61,7 @@ obtenir = objet[nom_de_propriété]; objet[nom_de_propriété] = définir; ``` -`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace). +`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace). #### Exemple @@ -83,19 +83,19 @@ objet['1'] = 'valeur'; console.log(objet[1]); ``` -Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`. +Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`. ```js -var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; +var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; objet[toto] = 'valeur'; console.log(objet[truc]); ``` -Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`. +Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`. ### Liaison de méthodes -Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction. +Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction. Pour plus d'informations, consultez la page sur [l'opérateur `this` et les liaisons de méthodes](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes). @@ -107,7 +107,7 @@ Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval x = eval('document.formulaire.' + controle + '.value'); ``` -`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets : +`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets : ```js x = document.formulaire[controle].value; diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.md b/files/fr/web/javascript/reference/operators/spread_syntax/index.md index cfc56cf9a8..d64bdf1eb1 100644 --- a/files/fr/web/javascript/reference/operators/spread_syntax/index.md +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition --- {{jsSidebar("Operators")}} -La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets). +La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets). {{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}} @@ -124,7 +124,7 @@ console.log(arr2); // [1, 2, 3, 4] console.log(arr); // [1, 2, 3] (inchangé) ``` -> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition). +> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition). ```js var a = [[1], [2], [3]]; diff --git a/files/fr/web/javascript/reference/operators/this/index.md b/files/fr/web/javascript/reference/operators/this/index.md index ef563b523c..8652da0e85 100644 --- a/files/fr/web/javascript/reference/operators/this/index.md +++ b/files/fr/web/javascript/reference/operators/this/index.md @@ -99,7 +99,7 @@ whatsThis.call(obj); // "Toto" whatsThis.apply(obj); // "Toto" ``` -Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}. +Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}. ```js function ajout(c, d){ diff --git a/files/fr/web/javascript/reference/operators/void/index.md b/files/fr/web/javascript/reference/operators/void/index.md index 3b87959b55..a83cd56945 100644 --- a/files/fr/web/javascript/reference/operators/void/index.md +++ b/files/fr/web/javascript/reference/operators/void/index.md @@ -55,11 +55,11 @@ void function iife() { Lorsqu'un navigateur utilise une URI avec `javascript:`, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur `void` peut alors être utilisé pour renvoyer cette valeur. Par exemple : <a href="javascript:void(0);"> - Cliquer ici (sans effet) + Cliquer ici (sans effet) </a> <a href="javascript:void(document.body.style.backgroundColor='green');"> - Cliquer ici pour rendre le fond vert + Cliquer ici pour rendre le fond vert </a> Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole `javascript:`, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements. @@ -80,10 +80,10 @@ Ainsi, la valeur de retour de la fonction `faireQQc` sera bloquée par `void` et | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1 | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/yield/index.md b/files/fr/web/javascript/reference/operators/yield/index.md index da998c2c0c..9e18bcad27 100644 --- a/files/fr/web/javascript/reference/operators/yield/index.md +++ b/files/fr/web/javascript/reference/operators/yield/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/yield --- {{jsSidebar("Operators")}} -Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)). +Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)). {{EmbedInteractiveExample("pages/js/expressions-yield.html")}} @@ -21,32 +21,32 @@ Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction gén [[rv =]] yield [[expression]]; - `expression` - - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place. + - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place. - `rv` - - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution. + - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution. ## Description -Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`. +Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`. Le mot-clé `yield` ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des _callbacks_. -Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée. +Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée. -Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes : +Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes : -- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ; -- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ; -- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ; -- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`. +- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ; +- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ; +- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ; +- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`. -Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur. +Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur. -Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle. +Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle. ## Exemples -Le code suivant est la déclaration d'un exemple de fonction génératrice : +Le code suivant est la déclaration d'un exemple de fonction génératrice : function* compteVentesPommes () { var listeVentes = [3, 7, 5]; @@ -55,7 +55,7 @@ Le code suivant est la déclaration d'un exemple de fonction génératrice : } } -Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué. +Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué. var magasinPommes = compteVentesPommes(); // Générateur { } console.log(magasinPommes.next()); // { value: 3, done: false } @@ -74,12 +74,12 @@ Une fois qu'une fonction génératrice est définie, elle peut être utilisée {{Compat("javascript.operators.yield")}} -## Notes spécifiques à Firefox +## Notes spécifiques à Firefox -- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}). +- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}). - À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): - - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }` + - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }` ## Voir aussi diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.md b/files/fr/web/javascript/reference/operators/yield_star_/index.md index 86ad5717d8..1a423260fa 100644 --- a/files/fr/web/javascript/reference/operators/yield_star_/index.md +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.md @@ -113,7 +113,7 @@ console.log(résultat); // "toto" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/async_function/index.md b/files/fr/web/javascript/reference/statements/async_function/index.md index f60c23b0e2..407b695987 100644 --- a/files/fr/web/javascript/reference/statements/async_function/index.md +++ b/files/fr/web/javascript/reference/statements/async_function/index.md @@ -143,9 +143,9 @@ setTimeout(parallelPromise, 13000); // identique à parallel Dans `sequentialStart`, l'exécution est arrêtée pendant deux secondes avant le premier `await` puis encore une autre seconde avant le deuxième `await`. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes. Avec `concurrentStart`, les deux minuteurs sont créés puis attendus derrière un `await` Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes. -Toutefois, les appels utilisant `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier. +Toutefois, les appels utilisant `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier. -Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`. +Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`. #### `async`/`await`, `Promise.prototype.then()` et la gestion des erreurs diff --git a/files/fr/web/javascript/reference/statements/break/index.md b/files/fr/web/javascript/reference/statements/break/index.md index 56826770a7..99846c4155 100644 --- a/files/fr/web/javascript/reference/statements/break/index.md +++ b/files/fr/web/javascript/reference/statements/break/index.md @@ -115,9 +115,9 @@ bloc_1: { | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Version non étiquetée. | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Version étiquetée ajoutée. | -| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/class/index.md b/files/fr/web/javascript/reference/statements/class/index.md index 51b852a022..c7ebe77032 100644 --- a/files/fr/web/javascript/reference/statements/class/index.md +++ b/files/fr/web/javascript/reference/statements/class/index.md @@ -70,9 +70,9 @@ class Carré extends Polygone { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/continue/index.md b/files/fr/web/javascript/reference/statements/continue/index.md index f0083f8248..e8219c122f 100644 --- a/files/fr/web/javascript/reference/statements/continue/index.md +++ b/files/fr/web/javascript/reference/statements/continue/index.md @@ -116,9 +116,9 @@ En utilisant le fragment ci-avant, on aura le résultat suivant : | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Pas de version étiquetée. | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Ajout de la version étiquetée. | -| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/do...while/index.md b/files/fr/web/javascript/reference/statements/do...while/index.md index 96265c32d8..aabf772ff7 100644 --- a/files/fr/web/javascript/reference/statements/do...while/index.md +++ b/files/fr/web/javascript/reference/statements/do...while/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Instructions/do...while --- {{jsSidebar("Statements")}} -L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois. +L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois. {{EmbedInteractiveExample("pages/js/statement-dowhile.html")}} diff --git a/files/fr/web/javascript/reference/statements/empty/index.md b/files/fr/web/javascript/reference/statements/empty/index.md index 32e9e3fb81..7cd25528f1 100644 --- a/files/fr/web/javascript/reference/statements/empty/index.md +++ b/files/fr/web/javascript/reference/statements/empty/index.md @@ -62,10 +62,10 @@ else | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/export/index.md b/files/fr/web/javascript/reference/statements/export/index.md index 2f8d075abc..51c40aa4b2 100644 --- a/files/fr/web/javascript/reference/statements/export/index.md +++ b/files/fr/web/javascript/reference/statements/export/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Instructions/export --- {{jsSidebar("Statements")}} -L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. +L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `export` ne peut pas être utilisée dans les scripts embarqués. @@ -46,11 +46,11 @@ Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScrip export { default } from …; - `nomN` - - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). + - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). ## Description -Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : +Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : - Les exports nommés : @@ -91,7 +91,7 @@ La syntaxe suivante n'exporte pas le défaut depuis le module importé : export * from …; ``` -Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : +Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : ```js export {default} from 'mod'; @@ -119,7 +119,7 @@ import { maFonction, maVariable, maClasse } from 'moduleParent.js'; ### Utilisation d'exports nommés -Dans le module, on pourra utiliser le code suivant : +Dans le module, on pourra utiliser le code suivant : ```js // module "mon-module.js" @@ -130,7 +130,7 @@ const machin = Math.PI + Math.SQRT2; export { cube, machin }; ``` -De cette façon, dans un autre script, on pourra avoir : +De cette façon, dans un autre script, on pourra avoir : ```js import { cube, machin } from 'mon-module'; @@ -152,14 +152,14 @@ export default function cube(x) { } ``` -Alors, dans un autre script, il sera facile d'importer l'export par défaut : +Alors, dans un autre script, il sera facile d'importer l'export par défaut : ```js import cube from './mon-module.js'; console.log(cube(3)); // 27 ``` -Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. +Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. ## Spécifications @@ -176,6 +176,6 @@ Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export - {{jsxref("Instructions/import", "import")}} - [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) -- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff -- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) +- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff +- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) - [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) diff --git a/files/fr/web/javascript/reference/statements/for...in/index.md b/files/fr/web/javascript/reference/statements/for...in/index.md index bff2b835d6..f32246e82f 100644 --- a/files/fr/web/javascript/reference/statements/for...in/index.md +++ b/files/fr/web/javascript/reference/statements/for...in/index.md @@ -28,7 +28,7 @@ L'**instruction `for...in`** permet d'itérer sur les [propriétés énumérable ## Description -Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes). +Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes). ### Les propriétés ajoutées, modifiées ou supprimées diff --git a/files/fr/web/javascript/reference/statements/for...of/index.md b/files/fr/web/javascript/reference/statements/for...of/index.md index dda1d8a5c8..d30ae286b3 100644 --- a/files/fr/web/javascript/reference/statements/for...of/index.md +++ b/files/fr/web/javascript/reference/statements/for...of/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Instructions/for...of --- {{jsSidebar("Statements")}} -L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété. +L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété. {{EmbedInteractiveExample("pages/js/statement-forof.html")}} @@ -280,7 +280,7 @@ for (let i of iterable) { } ``` -Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB) et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet. +Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB) et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet. ### Attention à ne pas réutiliser les générateurs @@ -308,7 +308,7 @@ for (let o of gen){ | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/for/index.md b/files/fr/web/javascript/reference/statements/for/index.md index beb5a287b3..447b1da100 100644 --- a/files/fr/web/javascript/reference/statements/for/index.md +++ b/files/fr/web/javascript/reference/statements/for/index.md @@ -34,7 +34,7 @@ L'instruction **`for`** crée une boucle composée de trois expressions optionne ### Utiliser `for` -L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle. +L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle. ```js for (var i = 0; i < 9; i++) { @@ -99,10 +99,10 @@ function showOffsetPos (sId) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.6.2', 'instruction for')}} | {{Spec2('ES1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/function/index.md b/files/fr/web/javascript/reference/statements/function/index.md index 0ad6510645..d25569a84b 100644 --- a/files/fr/web/javascript/reference/statements/function/index.md +++ b/files/fr/web/javascript/reference/statements/function/index.md @@ -121,10 +121,10 @@ function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/import/index.md b/files/fr/web/javascript/reference/statements/import/index.md index f924b45481..f2506afd53 100644 --- a/files/fr/web/javascript/reference/statements/import/index.md +++ b/files/fr/web/javascript/reference/statements/import/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Instructions/import --- {{jsSidebar("Statements")}} -L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs). +L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs). > **Note :** Il existe également une forme fonctionnelle, `import()` (cf. [ci-après](#dyn)) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut `nomodule` sur la balise {{HTMLElement("script")}}. @@ -33,35 +33,35 @@ L'instruction **`import`** est utilisée pour importer des liens qui sont expor - `exportParDefaut` - : Nom qui fera référence à l'export par défaut du module. - `nom-module` - - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées. + - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées. - `nom` - - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports. + - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports. - `export`, `exportN` - - : Nom des exports à importer. + - : Nom des exports à importer. - `alias`, `aliasN` - : Noms qui feront référence aux imports nommés. ## Description -Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe. +Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe. -### Importer l'intégralité du contenu d'un module +### Importer l'intégralité du contenu d'un module -Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports du module dans le fichier situé dans `/modules/mon-module.js`. +Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports du module dans le fichier situé dans `/modules/mon-module.js`. ```js import * as monModule from '/modules/mon-module.js'; ``` -Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci : +Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci : ```js monModule.faireToutesLesChosesIncroyables(); ``` -### Importer un seul export depuis un module +### Importer un seul export depuis un module -Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante. +Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante. ```js import {monExport} from '/modules/mon-module.js'; @@ -69,7 +69,7 @@ import {monExport} from '/modules/mon-module.js'; ### Importer plusieurs éléments exportés depuis un module -Ce qui suit insère à la fois `machin` et `truc` dans la portée courante. +Ce qui suit insère à la fois `machin` et `truc` dans la portée courante. ```js import {machin, truc} from '/modules/mon-module.js'; @@ -77,16 +77,16 @@ import {machin, truc} from '/modules/mon-module.js'; ### Importer un élément exporté avec un alias -Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante. +Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante. ```js import {nomDExportDeModuleVraimentVraimentLong as nomCourt} from '/modules/mon-module.js'; ``` -### Renommer plusieurs exports pendant l'import +### Renommer plusieurs exports pendant l'import -Importe des exports multiples depuis un module avec des alias commodes : +Importe des exports multiples depuis un module avec des alias commodes : ```js import { @@ -97,23 +97,23 @@ import { ### Importer un module uniquement pour ses effets de bord -Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur. +Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur. ```js import '/modules/mon-module.js'; ``` -### Importation des défauts +### Importation des défauts -Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts. +Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts. -La version la plus simple importe directement le défaut : +La version la plus simple importe directement le défaut : ```js import monDefaut from '/modules/mon-module.js'; ``` -Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple : +Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple : ```js import monDefaut, * as monModule from '/modules/mon-module.js'; @@ -146,7 +146,7 @@ let module = await import('/modules/mon-module.js'); ## Exemples -Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON. +Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON. ### Le module : fichier.js @@ -218,6 +218,6 @@ for (const link of document.querySelectorAll("nav > a")) { - [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta) - Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/) - [Jason Orendorff : ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules) -- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html) +- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html) - [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) - [Tutoriel JavaScript sur `export` et `import`](https://javascript.info/import-export) diff --git a/files/fr/web/javascript/reference/statements/label/index.md b/files/fr/web/javascript/reference/statements/label/index.md index ac0e02216e..0a1dd1906b 100644 --- a/files/fr/web/javascript/reference/statements/label/index.md +++ b/files/fr/web/javascript/reference/statements/label/index.md @@ -30,7 +30,7 @@ Une **instruction étiquetée (_labeled_ en anglais)** peut être utilisée avec Une étiquette (_label_) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions `break` ou `continue` afin d'interrompre cette boucle ou de reprendre son exécution. -JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`. +JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`. En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), on ne peut pas utiliser `let` comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (`let` est un identifiant réservé). @@ -171,9 +171,9 @@ L: function* F() {} | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/let/index.md b/files/fr/web/javascript/reference/statements/let/index.md index df64126959..5078f10df3 100644 --- a/files/fr/web/javascript/reference/statements/let/index.md +++ b/files/fr/web/javascript/reference/statements/let/index.md @@ -181,7 +181,7 @@ truc.montrerPrivee(); Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de `Truc` partageront la même `portéePrivée`. Il était possible d'obtenir un tel isolement avec `var` mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (_IIFE_)). -### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) et les erreurs liées à `let` +### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) et les erreurs liées à `let` Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}. diff --git a/files/fr/web/javascript/reference/statements/return/index.md b/files/fr/web/javascript/reference/statements/return/index.md index baec4c0f37..08f8b5beba 100644 --- a/files/fr/web/javascript/reference/statements/return/index.md +++ b/files/fr/web/javascript/reference/statements/return/index.md @@ -131,9 +131,9 @@ réponse(1337); // 56154 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/switch/index.md b/files/fr/web/javascript/reference/statements/switch/index.md index e478726ba6..548ac9346a 100644 --- a/files/fr/web/javascript/reference/statements/switch/index.md +++ b/files/fr/web/javascript/reference/statements/switch/index.md @@ -63,7 +63,7 @@ L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement êtr ### Utiliser `switch` -Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée. +Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée. ```js switch (expr) { @@ -258,9 +258,9 @@ Cette nouvelle version, exécutée, produira `"bonjour"` dans la console, sans c | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/with/index.md b/files/fr/web/javascript/reference/statements/with/index.md index 13fcf99f4e..bb7f84825f 100644 --- a/files/fr/web/javascript/reference/statements/with/index.md +++ b/files/fr/web/javascript/reference/statements/with/index.md @@ -83,10 +83,10 @@ with (Math) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------- | -| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}} | | | {{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES5.1')}} | Désormais interdit en mode strict. | -| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/strict_mode/index.md b/files/fr/web/javascript/reference/strict_mode/index.md index ce165b7145..b858bc2ed0 100644 --- a/files/fr/web/javascript/reference/strict_mode/index.md +++ b/files/fr/web/javascript/reference/strict_mode/index.md @@ -331,7 +331,7 @@ function fun(static) { 'use strict'; } // !!! Deux défauts liés à Mozilla Firefox : tout d'abord si votre code est en JavaScript 1.7 ou supérieur (par exemple pour du code qui concerne le chrome dans les extensions ou lorsqu'on utilise les balises `<script type="">`) et qu'il est en mode strict, `let` et `yield` fonctionnent de la façon dont ils fonctionnaient originellement au sein de Firefox. En revanche, pour du code strict utilisé sur une page web et chargé avec `<script src="">` ou `<script>...</script>`, on ne pourra pas utiliser `let`/`yield` comme identifiants. Ensuite, bien qu'ES5 réserve les mots-clés `class`, `enum`, `export`, `extends`, `import`, et `super` pour le mode strict et le mode non strict, les versions antérieures à Firefox 5 ne réservaient ces mots-clés que pour le mode strict. -Deuxièmement, [le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. [Le mode strict interdit cela](https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls), ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité. On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 : +Deuxièmement, [le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. [Le mode strict interdit cela](https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls), ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité. On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 : ```js "use strict"; diff --git a/files/fr/web/javascript/reference/template_literals/index.md b/files/fr/web/javascript/reference/template_literals/index.md index e774c50664..2c084fdf40 100644 --- a/files/fr/web/javascript/reference/template_literals/index.md +++ b/files/fr/web/javascript/reference/template_literals/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Littéraux_gabarits Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation. -> **Note :** Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents. +> **Note :** Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents. ## Syntaxe @@ -29,9 +29,9 @@ Les littéraux de gabarits sont des littéraux de chaînes de caractères permet ## Description -Les gabarits sont délimités par des caractères [accent grave](https://fr.wikipedia.org/wiki/Accent_grave) (\` \`) au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (_placeholders_). Ces espaces sont indiqués par le signe dollar ($) et des accolades (`${expression})`. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction. +Les gabarits sont délimités par des caractères [accent grave](https://fr.wikipedia.org/wiki/Accent_grave) (\` \`) au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (_placeholders_). Ces espaces sont indiqués par le signe dollar ($) et des accolades (`${expression})`. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction. -Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors [de gabarit étiqueté (cf. ci-après)](#Gabarits_étiquetés). +Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors [de gabarit étiqueté (cf. ci-après)](#Gabarits_étiquetés). ```js let rep = 42; @@ -50,7 +50,7 @@ function concatenationAdHoc(chaines, reponse){ console.log(concatenationAdHoc`La réponse est ${rep}.`); ``` -Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\\) : +Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\\) : ```js `\`` === "`"; // true @@ -58,7 +58,7 @@ Pour utiliser des accents graves dans un gabarit, on les échappera avec une ba ### Les chaînes de caractères multi-lignes -Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes : +Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes : ```js console.log('ligne de texte 1\n'+ @@ -112,14 +112,14 @@ classes += (isLargeScreen() ? ' icon-expander' : ' icon-collapser'); ``` -En ES2015 avec des gabarits et sans imbrication : +En ES2015 avec des gabarits et sans imbrication : ```js const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`; ``` -En ES2015 avec des gabarits imbriqués : +En ES2015 avec des gabarits imbriqués : ```js const classes = `header ${ isLargeScreen() ? '' : @@ -128,30 +128,30 @@ const classes = `header ${ isLargeScreen() ? '' : ### Gabarits étiquetés -Les _gabarits étiquetés_ (_tagged templates_) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction. +Les _gabarits étiquetés_ (_tagged templates_) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction. ```js let personne = 'Michou'; let age = 28; function monEtiquette(chaines, expPersonne, expAge) { - let chn0 = chaines[0]; // "ce " - let chn1 = chaines[1]; // " est un " - - // Techniquement, il y a une chaîne après - // l'expression finale (dans notre exemple), - // mais elle est vide (""), donc ne pas en tenir compte. - // var chn2 = chaines[2]; - - let chnAge; - if (expAge > 99){ - chnAge = 'centenaire'; - } else { - chnAge = 'jeunot'; - } + let chn0 = chaines[0]; // "ce " + let chn1 = chaines[1]; // " est un " + + // Techniquement, il y a une chaîne après + // l'expression finale (dans notre exemple), + // mais elle est vide (""), donc ne pas en tenir compte. + // var chn2 = chaines[2]; + + let chnAge; + if (expAge > 99){ + chnAge = 'centenaire'; + } else { + chnAge = 'jeunot'; + } // On peut tout à fait renvoyer une chaîne construite // avec un gabarit - return `${chn0}${expPersonne}${chn1}${chnAge}`; + return `${chn0}${expPersonne}${chn1}${chnAge}`; } let sortie = monEtiquette`ce ${ personne } est un ${ age }`; @@ -162,7 +162,7 @@ console.log(sortie); ### Chaînes brutes -La propriété spéciale `raw`, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter [les séquences d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux). +La propriété spéciale `raw`, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter [les séquences d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux). ```js function etiquette(chaines) { @@ -174,7 +174,7 @@ etiquette`ligne de texte 1 \n ligne de texte 2`; // "ligne de texte 1 \n ligne de texte 2" ``` -En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait : +En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait : ```js let chn = String.raw`Salut\n${2+3}!`; @@ -189,16 +189,16 @@ chn.split('').join(','); ### Les gabarits étiquetés et les séquences d'échappement -#### Comportement de ES2016 +#### Comportement de ES2016 -Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes : +Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes : - Les séquences d'échappement Unicode commencent par "\u", par exemple`\u00A9` -- Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple `\u{2F804}` -- Les séquences d'échappement hexadécimales commencent par "\x", par exemple `\xA9` +- Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple `\u{2F804}` +- Les séquences d'échappement hexadécimales commencent par "\x", par exemple `\xA9` - Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple `\0o251`. -Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée : +Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée : ```js latex`\unicode` @@ -208,9 +208,9 @@ latex`\unicode` #### Révision ES2018 pour les séquences d'échappement illégales -Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des [DSL](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9) ou du [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition [Template Literal Revision](https://tc39.github.io/proposal-template-literal-revision/) pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés. +Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des [DSL](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9) ou du [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition [Template Literal Revision](https://tc39.github.io/proposal-template-literal-revision/) pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés. -Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" : +Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" : ```js function latex(chn) { @@ -222,7 +222,7 @@ latex`\unicode` // { bidouillee: undefined, brute: "\\unicode" } ``` -Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits _étiquetés_, et non pour les gabarits de libellés *non étiquetés* : +Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits _étiquetés_, et non pour les gabarits de libellés *non étiquetés* : ```js example-bad let mauvaise = `mauvaise séquence d'échappement : \unicode`; @@ -245,5 +245,5 @@ let mauvaise = `mauvaise séquence d'échappement : \unicode`; - {{jsxref("String.raw()")}} - [Grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) - _[Template-like strings in ES3 compatible syntax](https://gist.github.com/WebReflection/8f227532143e63649804)_ -- [_ES6 en détails : les gabarits de libellé_ sur tech.mozfr.org](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) +- [_ES6 en détails : les gabarits de libellé_ sur tech.mozfr.org](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) - _[Styled Components](https://www.styled-components.com/)_ diff --git a/files/fr/web/javascript/shells/index.md b/files/fr/web/javascript/shells/index.md index dc0dd750b7..7cc7206afe 100644 --- a/files/fr/web/javascript/shells/index.md +++ b/files/fr/web/javascript/shells/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Shells --- {{JsSidebar}} -Un _shell_ (ou une interface système) JavaScript permet de tester rapidement des fragments de code [JavaScript](/fr/docs/Web/JavaScript) sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code. +Un _shell_ (ou une interface système) JavaScript permet de tester rapidement des fragments de code [JavaScript](/fr/docs/Web/JavaScript) sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code. ## Des shells JavaScript autonomes @@ -30,7 +30,7 @@ Les shells suivants fonctionnent avec Mozilla. - [JavaScript Shell](/fr/docs/Introduction_au_shell_JavaScript) (`js`) - Un interpréteur JavaScript en ligne de commande. - [xpcshell](/fr/docs/xpcshell) est un shell qui peut utiliser [XPConnect](/fr/docs/XPConnect), ce qui est parfois utile pour du développement Mozilla. - [jsconsole.com](http://jsconsole.com/) est une console JavaScript open-source, qui permet notamment de créer facilement des liens vers les expressions saisies précédemment. -- [JavaScript Shell (page web)](http://www.squarefree.com/shell/) est aussi disponible avec l'extension [Developer Assistant](https://addons.mozilla.org/fr/firefox/addon/extension-developer/). +- [JavaScript Shell (page web)](http://www.squarefree.com/shell/) est aussi disponible avec l'extension [Developer Assistant](https://addons.mozilla.org/fr/firefox/addon/extension-developer/). - [Jash: JavaScript Shell](http://billyreisinger.com/jash/) est un shell DHTML qui donne un accès en ligne de commande à une page web. - [MozRepl](https://github.com/bard/mozrepl) permet de se connecter à Firefox et à d'autres applications Mozilla, de les explorer, et de les modifier depuis l'intérieur pendant leur exécution. - [Execute JS](https://addons.mozilla.org/fr/firefox/addon/execute-js/) est une extension Firefox qui propose une console JavaScript améliorée, où il est possible d'exécuter facilement du code JavaScript et de modifier des fonctions. Cette extension n'est plus maintenue. diff --git a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md index eaa9f7bd04..9ed3926bf9 100644 --- a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md +++ b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md @@ -145,6 +145,6 @@ Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souv Il faudrait sinon pouvoir stocker des informations _cross-objet_. -Les informations _cross-objet_ sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide _toutes_ les hypothèses lorsqu'une modification se produit. Lorsque `[[Prototype]]` change, _tout_ le code qui en dépend doit être rejeté. L'opération `obj.__proto__ = ...` est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite. +Les informations _cross-objet_ sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide _toutes_ les hypothèses lorsqu'une modification se produit. Lorsque `[[Prototype]]` change, _tout_ le code qui en dépend doit être rejeté. L'opération `obj.__proto__ = ...` est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite. Encore pire, lorsqu'on évalue `obj.prop`, le moteur voit que l'objet a eu son `[[Prototype]]` changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que _l'exécution à venir est similaire à l'exécution passée_. Si du code observe un objet avec un `[[Prototype]]` modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, **toutes les opérations qui intéragissent avec un objet dont le `[[Prototype]]` a changé, ne peuvent pas être optimisées**. diff --git a/files/fr/web/manifest/index.md b/files/fr/web/manifest/index.md index c7977f1b4d..6dc500c80e 100644 --- a/files/fr/web/manifest/index.md +++ b/files/fr/web/manifest/index.md @@ -6,13 +6,13 @@ tags: - Manifeste translation_of: Web/Manifest --- -Le manifeste d'une application web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. +Le manifeste d'une application web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. -Les manifestes font partie d'un ensemble de technologies appelées les [applications web progressives](/fr/docs/Web/Apps/Progressive) (_progressive web apps_). Il s'agit d'applications web qui peuvent être installées sur la page d'accueil d'un appareil sans que l'utilisateur ait à se rendre dans une boutique d'applications. De plus, une fois installées, elles peuvent être utilisées sans connexion internet et sont capables de recevoir des notifications _push._ +Les manifestes font partie d'un ensemble de technologies appelées les [applications web progressives](/fr/docs/Web/Apps/Progressive) (_progressive web apps_). Il s'agit d'applications web qui peuvent être installées sur la page d'accueil d'un appareil sans que l'utilisateur ait à se rendre dans une boutique d'applications. De plus, une fois installées, elles peuvent être utilisées sans connexion internet et sont capables de recevoir des notifications _push._ -## Déployer un manifeste +## Déployer un manifeste -Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (_link_) dans l'entête (_head_) de votre document : +Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (_link_) dans l'entête (_head_) de votre document : <link rel="manifest" href="/manifest.webmanifest"> @@ -109,11 +109,11 @@ Les valeurs valides sont : | Mode d'affichage | Description | Affichage de rattrapage | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `fullscreen` | Toute la zone d'affichage disponible est utilisée et aucun agent utilisateur {{Glossary("chrome")}} n'est montré. | `standalone` | -| `standalone` | L'application va ressembler à une application autonome et se comporter comme telle. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur va exclure les élements d'interface qui permettent de contrôler la navigation mais peut inclure d'autres éléments comme une barre de statut. | `minimal-ui` | +| `standalone` | L'application va ressembler à une application autonome et se comporter comme telle. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur va exclure les élements d'interface qui permettent de contrôler la navigation mais peut inclure d'autres éléments comme une barre de statut. | `minimal-ui` | | `minimal-ui` | L'application va ressembler et se comporter comme une application autonome, mais elle aura quelques élements d'interface permettant de contrôler la navigation. Les éléments varient en fonction du navigateur web. | `browser` | | `browser` | L'application s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur, en fonction du navigateur et de la plateforme. C'est la valeur par défaut. | (None) | -> **Note :** Vous pouvez appliquer les CSS de manière séléctive pour votre application en fonction du mode d'affichage en utilisant la fonction [display-mode](/docs/Web/CSS/@media/display-mode). Cela peut être utilisé pour fournir une expérience utilisateur cohérente entre le lancement à partir d'une URL et le lancement à partir d'une icône de bureau. +> **Note :** Vous pouvez appliquer les CSS de manière séléctive pour votre application en fonction du mode d'affichage en utilisant la fonction [display-mode](/docs/Web/CSS/@media/display-mode). Cela peut être utilisé pour fournir une expérience utilisateur cohérente entre le lancement à partir d'une URL et le lancement à partir d'une icône de bureau. ### `icons` @@ -156,13 +156,13 @@ Les objets image peuvent contenir les valeurs suivantes : <td><code>sizes</code></td> <td> Une chaîne de caractères contenant les dimensions des images, séparées - par des espaces. + par des espaces. </td> </tr> <tr> <td><code>src</code></td> <td> - Le chemin du fichier image. Si <code>src</code> est une URL relative, + Le chemin du fichier image. Si <code>src</code> est une URL relative, l'URL de base sera celle du manifeste. </td> </tr> @@ -214,7 +214,7 @@ L'orientation peut être l'une des valeurs suivantes: ### `prefer_related_applications` -Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire. +Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire. ```json "prefer_related_applications": "false" diff --git a/files/fr/web/manifest/theme_color/index.md b/files/fr/web/manifest/theme_color/index.md index a4e49ac4cb..a172a3190e 100644 --- a/files/fr/web/manifest/theme_color/index.md +++ b/files/fr/web/manifest/theme_color/index.md @@ -24,7 +24,7 @@ translation_of: Web/Manifest/theme_color </tbody> </table> -Le champ `theme_color` est une chaîne de caractères qui défini la couleur du thème par défaut de l'application. Cela peut parfois affecter la manière dont l'OS affiche le site (e.g., avec la bare des tâches sous Android, la couleur du thème entoure le site). +Le champ `theme_color` est une chaîne de caractères qui défini la couleur du thème par défaut de l'application. Cela peut parfois affecter la manière dont l'OS affiche le site (e.g., avec la bare des tâches sous Android, la couleur du thème entoure le site). ## Exemples diff --git a/files/fr/web/mathml/attribute/index.md b/files/fr/web/mathml/attribute/index.md index c1b4fdffae..887c588063 100644 --- a/files/fr/web/mathml/attribute/index.md +++ b/files/fr/web/mathml/attribute/index.md @@ -105,5 +105,5 @@ Cette référence est une liste, dans l'ordre alphabétique, des attributs MathM | `symmetric` | {{ MathMLElement("mo") }} | Si l'attribut `stretchy` vaut `true`, cet attribut définit si oui ou non l'opérateur doit être symétrique verticalement par rapport à l'axe mathématique imaginaire (la ligne de fraction centrée). | | `voffset` | {{ MathMLElement("mpadded") }} | Définit la position verticale d'un contenu fils. | | `width` | {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }} | Définit la largeur souhaitée. Voir les [longueurs](/fr/docs/Web/MathML/Attribute/Values) pour les valeurs possibles. | -| `xlink:href` {{deprecated_inline}} | _Tous_ | Peut être utilisé pour former un hyperlien avec un URI donné. Cependant, il est conseillé d'utiliser l'attribut `href` à la place. | +| `xlink:href` {{deprecated_inline}} | _Tous_ | Peut être utilisé pour former un hyperlien avec un URI donné. Cependant, il est conseillé d'utiliser l'attribut `href` à la place. | | `xmlns` | {{ MathMLElement("math") }} | Définit l'URI de l'espace de nom MathML ([`http://www.w3.org/1998/Math/MathML`](http://www.w3.org/1998/Math/MathML)) | diff --git a/files/fr/web/mathml/element/math/index.md b/files/fr/web/mathml/element/math/index.md index b7deea058d..830c863f87 100644 --- a/files/fr/web/mathml/element/math/index.md +++ b/files/fr/web/mathml/element/math/index.md @@ -49,10 +49,10 @@ En plus des attributs qui suivent, l'élément `<math>` accepte tous les attribu ```html <!DOCTYPE html> <html> - <head> - <title>MathML en HTML5</title> - </head> - <body> + <head> + <title>MathML en HTML5</title> + </head> + <body> <math> <mrow> @@ -75,7 +75,7 @@ En plus des attributs qui suivent, l'élément `<math>` accepte tous les attribu </mrow> </math> - </body> + </body> </html> ``` diff --git a/files/fr/web/mathml/element/menclose/index.md b/files/fr/web/mathml/element/menclose/index.md index ca951855f1..f0bc1c0a4e 100644 --- a/files/fr/web/mathml/element/menclose/index.md +++ b/files/fr/web/mathml/element/menclose/index.md @@ -47,11 +47,11 @@ L'élément MathML `<menclose>` permet d'afficher son contenu groupé au sein d' ```html <math> - <menclose notation="circle box"> - <mi> x </mi> - <mo> + </mo> - <mi> y </mi> - </menclose> + <menclose notation="circle box"> + <mi> x </mi> + <mo> + </mo> + <mi> y </mi> + </menclose> </math> ``` diff --git a/files/fr/web/mathml/element/mfenced/index.md b/files/fr/web/mathml/element/mfenced/index.md index 24296cb7a5..18a53ce828 100644 --- a/files/fr/web/mathml/element/mfenced/index.md +++ b/files/fr/web/mathml/element/mfenced/index.md @@ -33,7 +33,7 @@ translation_of: Web/MathML/Element/mfenced - open - : Une chaîne de caractère pour le délimiteur ouvrant. La valeur par défaut est « `(` » et tous les blancs sont tronqués. - separators - - : Une séquence de plusieurs caractères (zéro ou plus) à utiliser pour les séparateurs, éventuellement séparés par des blancs qui seront ignorés. La valeur par défaut est « , ». En définissant plus d'un caractère, il est possible d'utiliser différents séparateurs pour chaque argument de l'expression. Si jamais il y a trop de séparateurs, le surplus est ignoré. S'il n'y en a pas assez, le dernier séparateur est répété. + - : Une séquence de plusieurs caractères (zéro ou plus) à utiliser pour les séparateurs, éventuellement séparés par des blancs qui seront ignorés. La valeur par défaut est « , ». En définissant plus d'un caractère, il est possible d'utiliser différents séparateurs pour chaque argument de l'expression. Si jamais il y a trop de séparateurs, le surplus est ignoré. S'il n'y en a pas assez, le dernier séparateur est répété. ## Exemples diff --git a/files/fr/web/mathml/element/mover/index.md b/files/fr/web/mathml/element/mover/index.md index f183266eeb..503acc4d75 100644 --- a/files/fr/web/mathml/element/mover/index.md +++ b/files/fr/web/mathml/element/mover/index.md @@ -13,7 +13,7 @@ L'élément MathML `<mover>` est utilisé pour attacher un accent ou une limite - : Lorsqu'il vaut `true` le script au-dessus est un _accent_, qui est affiché plus près de la base. Lorsqu'il vaut `false` (valeur par défaut) le script au-dessus est une _limite_ au-dessus de la base. - align - - : L'alignement du script au-dessus. Les valeurs possibles sont : `left`, `center`, et `right`. + - : L'alignement du script au-dessus. Les valeurs possibles sont : `left`, `center`, et `right`. - class, id, style - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS). - href @@ -27,7 +27,7 @@ L'élément MathML `<mover>` est utilisé pour attacher un accent ou une limite Exemple de rendu:  -Rendu dans votre navigateur : <math><mover accent="true"><mrow><mi>x </mi><mo>+ </mo><mi>y </mi><mo>+ </mo><mi>z </mi></mrow><mo>⏞</mo></mover></math> +Rendu dans votre navigateur : <math><mover accent="true"><mrow><mi>x </mi><mo>+ </mo><mi>y </mi><mo>+ </mo><mi>z </mi></mrow><mo>⏞</mo></mover></math> ```html <math> diff --git a/files/fr/web/mathml/element/msub/index.md b/files/fr/web/mathml/element/msub/index.md index b53cdcafab..3b7be3e203 100644 --- a/files/fr/web/mathml/element/msub/index.md +++ b/files/fr/web/mathml/element/msub/index.md @@ -29,10 +29,10 @@ Rendu dans votre navigateur: <math><msub><mi>X</mi> <mn>1</mn></msub></math> ```html <math> - <msub> - <mi>X</mi> - <mn>1</mn> - </msub> + <msub> + <mi>X</mi> + <mn>1</mn> + </msub> </math> ``` diff --git a/files/fr/web/mathml/element/munderover/index.md b/files/fr/web/mathml/element/munderover/index.md index 12e067d42a..2266929d57 100644 --- a/files/fr/web/mathml/element/munderover/index.md +++ b/files/fr/web/mathml/element/munderover/index.md @@ -38,7 +38,7 @@ Exemple de rendu:  ```html <math displaystyle="true"> - <munderover > + <munderover > <mo> ∫ <!--INTEGRAL--> </mo> <mn> 0 </mn> <mi> ∞ <!--INFINITY--> </mi> diff --git a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md index 5622d60de9..b7ae90fe57 100644 --- a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md +++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md @@ -4,6 +4,6 @@ slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula original_slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique --- -Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique : +Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique : -<math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> </mrow><mo>+ </mo><mi>c</mi> </mrow><mo>=</mo> <mn>0</mn> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow><mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> </mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>c</mi> </mrow><mi>a</mi> </mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> <mo>+ </mo><msup><mfenced><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mfenced><mn>2</mn> </msup></mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow><mrow><mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac></mrow><mo>+ </mo><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup></mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mrow><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> </mrow><mn>2</mn> </msup><mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mrow><mo>=</mo> <mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow><mrow><mn>2</mn> <mi>a</mi></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr></mtable></math> +<math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> </mrow><mo>+ </mo><mi>c</mi> </mrow><mo>=</mo> <mn>0</mn> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow><mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> </mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>c</mi> </mrow><mi>a</mi> </mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> <mo>+ </mo><msup><mfenced><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mfenced><mn>2</mn> </msup></mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow><mrow><mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac></mrow><mo>+ </mo><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup></mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mrow><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> </mrow><mn>2</mn> </msup><mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mrow><mo>=</mo> <mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow><mrow><mn>2</mn> <mi>a</mi></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr></mtable></math> diff --git a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md index a283118350..f8e8b95ed4 100644 --- a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md +++ b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md @@ -76,7 +76,7 @@ Autrement, on peut utiliser cette commande : Les arguments `-map` correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument `-adaptation_sets` permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio). -On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers `.mpd` avec `mimetype="application/dash+xml"`. +On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers `.mpd` avec `mimetype="application/dash+xml"`. ## Utiliser DASH, côté client diff --git a/files/fr/web/performance/how_browsers_work/index.md b/files/fr/web/performance/how_browsers_work/index.md index e8e78939fc..db2ab9f11c 100644 --- a/files/fr/web/performance/how_browsers_work/index.md +++ b/files/fr/web/performance/how_browsers_work/index.md @@ -16,7 +16,7 @@ Pour comprendre comment améliorer les performances et les performances perçues Les sites rapides offrent une meilleure expérience utilisateur. Les utilisateurs veulent et s'attendent à des expériences Web avec un contenu rapide à charger et à interagir avec fluidité. -La compréhension des problèmes liés 1) à la latence et 2) les problèmes liés au fait que, dans la plupart des cas, les navigateurs fonctionné à un seul thread. Cela sont deux problèmes majeurs dans les performances Web. +La compréhension des problèmes liés 1) à la latence et 2) les problèmes liés au fait que, dans la plupart des cas, les navigateurs fonctionné à un seul thread. Cela sont deux problèmes majeurs dans les performances Web. La latence est notre principale menace à surmonter pour assurer une charge rapide. Pour être rapides à charger, les objectifs des développeurs incluent l’envoi des informations demandées aussi rapidement que possible, ou du moins, cela semble super rapide. La latence du réseau est le temps nécessaire pour transmettre des octets par liaison radio aux ordinateurs. La performance Web est ce que nous devons faire pour que le chargement de la page se fasse le plus rapidement possible. @@ -114,7 +114,7 @@ Même si le code HTML de la page de demande est plus volumineux que le paquet in Nous décrivons cinq étapes dans le chemin de rendu critique, ou "[critical rendering path](/fr/docs/Web/Performance/Critical_rendering_path)". -La première étape consiste à traiter le balisage HTML et à créer l'arborescence DOM. L'analyse HTML implique la création de jetons, [tokenization,](/fr/docs/Web/API/DOMTokenList) et la construction du DOM tree. Les jetons HTML incluent les balises de début et de fin, ainsi que les noms et les valeurs des attributs. Si le document est bien formé, son analyse est simple et rapide. L'analyseur analyse les entrées sous forme de jetons dans le document, créant ainsi le document tree. +La première étape consiste à traiter le balisage HTML et à créer l'arborescence DOM. L'analyse HTML implique la création de jetons, [tokenization,](/fr/docs/Web/API/DOMTokenList) et la construction du DOM tree. Les jetons HTML incluent les balises de début et de fin, ainsi que les noms et les valeurs des attributs. Si le document est bien formé, son analyse est simple et rapide. L'analyseur analyse les entrées sous forme de jetons dans le document, créant ainsi le document tree. Le DOM tree décrit le contenu du document. L'élément [`<html>`](/fr/docs/Web/HTML/Element/html) est la première balise et le premier nœud racine de du document tree. L'arbre reflète les relations et les hiérarchies entre différentes balises. Les balises imbriquées dans d'autres balises sont des nœuds enfants. Plus le nombre de nœuds DOM est élevé, le plus de temps ca prends pour construire le DOM tree. diff --git a/files/fr/web/performance/how_long_is_too_long/index.md b/files/fr/web/performance/how_long_is_too_long/index.md index 3011ce92e6..9ce23d8285 100644 --- a/files/fr/web/performance/how_long_is_too_long/index.md +++ b/files/fr/web/performance/how_long_is_too_long/index.md @@ -3,26 +3,26 @@ title: "Temps de chargement\_: à partir de quel moment un site est-il «\_lent\ slug: Web/Performance/How_long_is_too_long translation_of: Web/Performance/How_long_is_too_long --- -Il n'y a pas de règle stricte définissant ce qui constitue un site trop long à charger, mais il y a des bonnes pratiques spécifiques pour définir un bon temps de chargement du contenu (1 seconde), de fonctionnement au ralenti (50 millisecondes), d'animation (16,7 secondes) ou encore de réponse à la saisie d'un visiteur (50 à 200 millisecondes). +Il n'y a pas de règle stricte définissant ce qui constitue un site trop long à charger, mais il y a des bonnes pratiques spécifiques pour définir un bon temps de chargement du contenu (1 seconde), de fonctionnement au ralenti (50 millisecondes), d'animation (16,7 secondes) ou encore de réponse à la saisie d'un visiteur (50 à 200 millisecondes). ## Objectifs de chargement -La durée optimale de temps de chargement est souvent définie comme étant « inférieure à une seconde », mais qu'est-ce que cela signifie ? Ce temps d'une seconde devrait être considéré comme le temps maximal pour indiquer à une personne visitant le site que la demande à été traitée et que le nouveau contenu a été chargé, ce qui signifie par exemple que le navigateur affiche le titre de la page et sa couleur de fond. +La durée optimale de temps de chargement est souvent définie comme étant « inférieure à une seconde », mais qu'est-ce que cela signifie ? Ce temps d'une seconde devrait être considéré comme le temps maximal pour indiquer à une personne visitant le site que la demande à été traitée et que le nouveau contenu a été chargé, ce qui signifie par exemple que le navigateur affiche le titre de la page et sa couleur de fond. La première ressource récupérée après une demande est généralement un document HTML, qui appelle lui-même par la suite des ressources additionnelles. Comme noté dans la description du [chemin critique de rendu (en anglais <i lang="en">critical rendering path</i>)](/fr/docs/Web/Performance/Critical_rendering_path), lorsque la ressource est reçue alors les navigateurs commencent à traiter le HTML et affichent son rendu au fur et à mesure qu'il est reçu plutôt que d'attendre le chargement des ressources additionnelles. -Oui, un temps de chargement d'une seconde est un bon objectif, mais c'est un objectif qui ne sera rempli que par quelques sites seulement. Les attentes diffèrent en réalité en fonction du contexte. L'affichage du texte « Bonjour tout le monde » devrait pouvoir s'afficher en quelques millisecondes sur un réseau d'entreprise, mais le téléchargement de la vidéo d'un chat rigolo sur un appareil de plus de 5 ans avec un réseau <i lang="en">Edge</i> dans le Nord de la Sibérie pourrait prendre plus de 20 secondes sans choquer personne. D'une manière plus générale, si vous attendez trois ou quatre secondes avant de fournir le moindre contenu à la personne visitant votre site, vous perdrez des visiteurs potentiels qui ne reviendront peut-être jamais consulter votre site. +Oui, un temps de chargement d'une seconde est un bon objectif, mais c'est un objectif qui ne sera rempli que par quelques sites seulement. Les attentes diffèrent en réalité en fonction du contexte. L'affichage du texte « Bonjour tout le monde » devrait pouvoir s'afficher en quelques millisecondes sur un réseau d'entreprise, mais le téléchargement de la vidéo d'un chat rigolo sur un appareil de plus de 5 ans avec un réseau <i lang="en">Edge</i> dans le Nord de la Sibérie pourrait prendre plus de 20 secondes sans choquer personne. D'une manière plus générale, si vous attendez trois ou quatre secondes avant de fournir le moindre contenu à la personne visitant votre site, vous perdrez des visiteurs potentiels qui ne reviendront peut-être jamais consulter votre site. En optimisant les performances de votre site, visez un temps de premier chargement du contenu ambitieux, comme 5 secondes sur un réseau mobile 3G, et 1,5 seconde sur un réseau Wifi, avec peut-être des objectifs de chargement de page encore plus ambitieux pour les chargements de page ultérieurs, en tirant parti des <i lang="en">service workers</i> et de la mise en cache. Il y a plusieurs étapes où vous devrez travailler, suivant qu'il s'agisse d'initialiser le chargement de la page, du chargement des ressources additionnelles, de la réponse à l'interaction de l'utilisateur ou de l'utilisatrice ou encore pour proposer des animations fluides. C'est ce que nous détaillerons dans les sections suivantes. ### Objectifs concernant les étapes de chargement de la page (en anglais <i lang="en">idling</i>) -Les navigateurs s'occupent des tâches les unes après les autres (même si des tâches de fond peuvent être prises en charge par les <i lang="en">web workers</i>). Cela signifie que l'interaction avec le visiteur, la peinture de la page et l'exécution des scripts ont lieu lors d'un processus unique. Si le processus est occupé à exécuter du code JavaScript complexe, le processus principal ne sera pas disponible pour réagir à la saisie du visiteur (par exemple le fait d'appuyer sur un bouton). Pour cette raison, le périmètre de l'exécution des scripts devrait être limité et divisé en plusieurs bouts de code pouvant chacun être exécuté en 50 millisecondes ou moins. Cela rend le processus disponible pour l'interaction avec la personne visitant le site. +Les navigateurs s'occupent des tâches les unes après les autres (même si des tâches de fond peuvent être prises en charge par les <i lang="en">web workers</i>). Cela signifie que l'interaction avec le visiteur, la peinture de la page et l'exécution des scripts ont lieu lors d'un processus unique. Si le processus est occupé à exécuter du code JavaScript complexe, le processus principal ne sera pas disponible pour réagir à la saisie du visiteur (par exemple le fait d'appuyer sur un bouton). Pour cette raison, le périmètre de l'exécution des scripts devrait être limité et divisé en plusieurs bouts de code pouvant chacun être exécuté en 50 millisecondes ou moins. Cela rend le processus disponible pour l'interaction avec la personne visitant le site. ### Objectifs concernant les animations -Pour les animations de défilement et autres animations qui doivent être fluides et réactives, le contenu est repeint à 60 images par seconde (60 fps), ce qui fait une fois toutes les 16,7 millisecondes. Ces 16.7 millisecondes incluent la gestion des scripts, le <i lang="en">reflow</i> et le <i lang="en">repaint</i>. Un document met environ 6 millisecondes pour rendre une image, ce qui laisse environ 10 millisecondes au reste. Tout ce qui prend moins de 60 images par secondes risque d'apparaître cassé, surtout s'il s'agit de changements d'images. +Pour les animations de défilement et autres animations qui doivent être fluides et réactives, le contenu est repeint à 60 images par seconde (60 fps), ce qui fait une fois toutes les 16,7 millisecondes. Ces 16.7 millisecondes incluent la gestion des scripts, le <i lang="en">reflow</i> et le <i lang="en">repaint</i>. Un document met environ 6 millisecondes pour rendre une image, ce qui laisse environ 10 millisecondes au reste. Tout ce qui prend moins de 60 images par secondes risque d'apparaître cassé, surtout s'il s'agit de changements d'images. ### Objectifs concernant la réactivité -Lorsque la personne visitant le site interagit avec le contenu, il est important de fournir une réponse et de faire connaître cette réponse au visiteur sous 100 millisecondes au maximum, et de préférence en moins de 50 millisecondes. Une réponse de 50 millisecondes sera ressentie comme étant immédiate. La mise à disposition de l'interaction devrait le plus souvent possible être ressentie comme étant immédiate, par exemple lorsqu'il s'agit du survol ou de l'appui sur un bouton, mais cela ne veut pas dire que la réponse complète devrait être instantanée. Si une réponse plus lente que 100 millisecondes peut créer une déconnexion entre l'action du visiteur et la réponse, une transition de 100 ou 200 millisecondes peut aider le visiteur à remarquer la réponse à l'interaction initiée, telle que l'ouverture d'un menu. Si une réponse prend plus de 100 millisecondes à être terminée, il est important de fournir une forme de retour utilisateur pour informer que l'interaction a bien eu lieu. +Lorsque la personne visitant le site interagit avec le contenu, il est important de fournir une réponse et de faire connaître cette réponse au visiteur sous 100 millisecondes au maximum, et de préférence en moins de 50 millisecondes. Une réponse de 50 millisecondes sera ressentie comme étant immédiate. La mise à disposition de l'interaction devrait le plus souvent possible être ressentie comme étant immédiate, par exemple lorsqu'il s'agit du survol ou de l'appui sur un bouton, mais cela ne veut pas dire que la réponse complète devrait être instantanée. Si une réponse plus lente que 100 millisecondes peut créer une déconnexion entre l'action du visiteur et la réponse, une transition de 100 ou 200 millisecondes peut aider le visiteur à remarquer la réponse à l'interaction initiée, telle que l'ouverture d'un menu. Si une réponse prend plus de 100 millisecondes à être terminée, il est important de fournir une forme de retour utilisateur pour informer que l'interaction a bien eu lieu. diff --git a/files/fr/web/performance/index.md b/files/fr/web/performance/index.md index 78fa39206d..1a4021e71f 100644 --- a/files/fr/web/performance/index.md +++ b/files/fr/web/performance/index.md @@ -22,7 +22,7 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - [What is web performance](/fr/docs/Learn/Performance/What_is_web_performance) - : This article starts the module off with a good look at what Performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make Performance part of our web development workflow. - [Web Performance Basics](/fr/docs/Learn/Performance/web_performance_basics) - - : In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic. + - : In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic. - [How do users perceive performance?](/fr/docs/Learn/Performance/perceived_performance) - : More important than how fast your website is in milliseconds, is how fast do your users perceive your site to be. Page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations impact these perceptions. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings themselves. - [Multimedia: Images and Video](/fr/docs/Learn/Performance/Multimedia) @@ -49,8 +49,8 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod ## Other documentation -- [Developer Tools Performance Features](/fr/docs/Tools/Performance) - - : This section provides information on how to use and understand the performance features in your developer tools, including [Waterfall](/fr/docs/Tools/Performance/Waterfall), [Call Tree](/fr/docs/Tools/Performance/Call_Tree), and [Flame Charts](/fr/docs/Tools/Performance/Flame_Chart). +- [Developer Tools Performance Features](/fr/docs/Tools/Performance) + - : This section provides information on how to use and understand the performance features in your developer tools, including [Waterfall](/fr/docs/Tools/Performance/Waterfall), [Call Tree](/fr/docs/Tools/Performance/Call_Tree), and [Flame Charts](/fr/docs/Tools/Performance/Flame_Chart). - [Understanding Latency](/fr/docs/Learn/Performance/Understanding_latency) - : Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it. @@ -113,7 +113,7 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - [Mobile performance](/fr/docs/Learn/Performance/Mobile) - : With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations. - Web font performance - - : An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience. + - : An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience. - Performance bottlenecks Understanding bandwidth @@ -123,22 +123,22 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - The role of TLS in performance - : TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties. - Reading performance charts - - : Developer tools provide information on performance, memory, and network requests. Knowing how to read [waterfall](/fr/docs/Tools/Performance/Waterfall) charts, [call trees](/fr/docs/Tools/Performance/Call_Tree), traces, [flame charts](/fr/docs/Tools/Performance/Flame_Chart) , and [allocations](/fr/docs/Tools/Performance/Allocations) in your browser developer tools will help you understand waterfall and flame charts in other performance tools. + - : Developer tools provide information on performance, memory, and network requests. Knowing how to read [waterfall](/fr/docs/Tools/Performance/Waterfall) charts, [call trees](/fr/docs/Tools/Performance/Call_Tree), traces, [flame charts](/fr/docs/Tools/Performance/Flame_Chart) , and [allocations](/fr/docs/Tools/Performance/Allocations) in your browser developer tools will help you understand waterfall and flame charts in other performance tools. - Alternative media formats - - : When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. + - : When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. - Analyzing JavaScript bundles - : No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know _what_ you're using, as well how to detect if your app contains duplicated scripts between bundles. - [Lazy loading](/fr/docs/Web/Performance/Lazy_loading) - - : It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed. + - : It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed. - Lazy-loading JavaScript with dynamic imports - : When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion. - [Controlling resource delivery with resource hints](/fr/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints) - - : Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage. + - : Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage. - [Performance Budgets](/fr/docs/Web/Performance/Performance_budgets) - : Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. - [Web performance checklist](/fr/docs/Web/Performance/Checklist) - : A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc. -- [Mobile performance checklist](/fr/docs/Web/Performance/Mobile_performance_checklist) +- [Mobile performance checklist](/fr/docs/Web/Performance/Mobile_performance_checklist) - : A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices. ### App Performance diff --git a/files/fr/web/performance/lazy_loading/index.md b/files/fr/web/performance/lazy_loading/index.md index 4e659bda89..5a70ef59cf 100644 --- a/files/fr/web/performance/lazy_loading/index.md +++ b/files/fr/web/performance/lazy_loading/index.md @@ -21,10 +21,10 @@ Le chargement différé peut être appliqué sur de multiples ressources et avec #### Division du code -Le code JavaScript, CSS et HTML peuvent être divisés en petits morceaux. Cela permet de n'envoyer que la portion de code nécessaire à l'affichage sur l'écran de l'internaute, et donc d'améliorer les temps de chargement. Le reste sera chargé sur demande. Deux systèmes sont possibles : +Le code JavaScript, CSS et HTML peuvent être divisés en petits morceaux. Cela permet de n'envoyer que la portion de code nécessaire à l'affichage sur l'écran de l'internaute, et donc d'améliorer les temps de chargement. Le reste sera chargé sur demande. Deux systèmes sont possibles : -- division par points d'entrée : séparation du code en différents points d'entrée au sein de l'application ; -- division dynamique : séparation du code où des déclarations [`import()`](/fr/docs/Web/JavaScript/Reference/Statements/import) dynamiques sont utilisées. +- division par points d'entrée : séparation du code en différents points d'entrée au sein de l'application ; +- division dynamique : séparation du code où des déclarations [`import()`](/fr/docs/Web/JavaScript/Reference/Statements/import) dynamiques sont utilisées. ### JavaScript @@ -34,7 +34,7 @@ Toute balise `<script>` utilisant `type="module"` sera traitée comme un [module ### CSS -Par défaut, les fichiers CSS sont traités comme des ressources [bloquant le rendu](/fr/docs/Web/Performance/Critical_rendering_path), donc le navigateur n'affichera aucun contenu traité tant que le [CSSOM (pour <i lang="en">CSS Object Model</i>)](/fr/docs/Web/API/CSS_Object_Model) est construit. Les fichiers CSS doivent être légers, délivrés aussi rapidement que possible, et l'utilisation des types de médias et des requêtes média est conseillé pour ne pas bloquer le rendu : +Par défaut, les fichiers CSS sont traités comme des ressources [bloquant le rendu](/fr/docs/Web/Performance/Critical_rendering_path), donc le navigateur n'affichera aucun contenu traité tant que le [CSSOM (pour <i lang="en">CSS Object Model</i>)](/fr/docs/Web/API/CSS_Object_Model) est construit. Les fichiers CSS doivent être légers, délivrés aussi rapidement que possible, et l'utilisation des types de médias et des requêtes média est conseillé pour ne pas bloquer le rendu : ```html <link href="style.css" rel="stylesheet" media="all"> @@ -71,7 +71,7 @@ Vous pouvez déterminer si une image donnée a terminé son chargement en examin #### Polyfill -Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateurs qui ne sont pas compatibles, vous pouvez utiliser le polyfill suivant : [loading-attribute-polyfill](https://github.com/mfranzke/loading-attribute-polyfill) +Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateurs qui ne sont pas compatibles, vous pouvez utiliser le polyfill suivant : [loading-attribute-polyfill](https://github.com/mfranzke/loading-attribute-polyfill) #### API Intersection Observer @@ -79,7 +79,7 @@ Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateur #### Gestionnaires d'évènements -Lorsque la compatibilité navigateur est cruciale, vous pouvez utiliser ces quelques options : +Lorsque la compatibilité navigateur est cruciale, vous pouvez utiliser ces quelques options : - [polyfill pour l'API <i lang="en">Intersection observer</i>](https://github.com/w3c/IntersectionObserver) diff --git a/files/fr/web/performance/performance_budgets/index.md b/files/fr/web/performance/performance_budgets/index.md index 4626639e8c..7c5b83f4ea 100644 --- a/files/fr/web/performance/performance_budgets/index.md +++ b/files/fr/web/performance/performance_budgets/index.md @@ -46,7 +46,7 @@ Pour un site contenant beaucoup de texte, tel qu'un blog ou un site d'actualité La valeur ultime d'un budget de performance est de corréler l'impact de la performance sur les objectifs commerciaux ou produits. Lors de la définition des mesures, vous devez vous concentrer sur l'[expérience utilisateur](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/), qui dictera non seulement le taux de rebond ou de conversion, mais aussi la probabilité de retour de l'utilisateur. -## Comment mettre en œuvre un budget de performance? +## Comment mettre en œuvre un budget de performance? Pendant le développement, il existe quelques outils pour effectuer des vérifications sur les actifs nouveaux ou modifiés: diff --git a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md index 59875ebc2c..35c6b10a88 100644 --- a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md @@ -191,7 +191,7 @@ Ici il faut: - Appeler `Event.preventDefault()` pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68). - Stocker l'objet événement dans la variable `deferredPrompt` afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle. -- Configurer le bouton `display: block` afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer. +- Configurer le bouton `display: block` afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer. - Définir un gestionnaire de `click` pour le bouton. Le gestionnaire de clics contient les étapes suivantes: diff --git a/files/fr/web/progressive_web_apps/app_structure/index.md b/files/fr/web/progressive_web_apps/app_structure/index.md index 6b3841be1a..56fb12cba4 100644 --- a/files/fr/web/progressive_web_apps/app_structure/index.md +++ b/files/fr/web/progressive_web_apps/app_structure/index.md @@ -28,7 +28,7 @@ Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré ### Pourquoi dois-je l'utiliser ? -Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que [l'ajouter à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen) ou [l'envoi de notifications](/fr/docs/Web/API/Push_API), sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue. +Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que [l'ajouter à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen) ou [l'envoi de notifications](/fr/docs/Web/API/Push_API), sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue. Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web. @@ -38,7 +38,7 @@ Il est important de se rappeler les avantages des PWA et de les garder à l'espr - Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager. - Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle. -- Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que [les tags meta viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), [les reqêtes media CSS](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [les Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et les [Grid CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). +- Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que [les tags meta viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), [les reqêtes media CSS](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [les Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et les [Grid CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). ## Approche différente : les streams @@ -98,7 +98,7 @@ Du point de vue HTML, l'app shell est tout ce qui est à l'extérieur de la sect </html> ``` -La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens). +La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens). Le seul travail de l'application est de lister toutes les entrées A-Frame de la compétition js13kGames 2017. Comme vous pouvez le voir, c'est un site web en une page tout ce qu'il y a de plus ordinaire - le but est d'avoir quelque chose de simple afin que nous puissions nous concentrer sur l'implémentation des réelles fonctionnalités PWA. @@ -158,7 +158,7 @@ button.addEventListener('click', function(e) { }); ``` -Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux: +Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux: ```js function randomNotification() { diff --git a/files/fr/web/progressive_web_apps/introduction/index.md b/files/fr/web/progressive_web_apps/introduction/index.md index 14d5beeaf6..156468624e 100644 --- a/files/fr/web/progressive_web_apps/introduction/index.md +++ b/files/fr/web/progressive_web_apps/introduction/index.md @@ -37,7 +37,7 @@ Il y a des principes clés qu'une application web devrait suivre afin d'être id - [Discoverable](/fr/docs/Web/Progressive_web_apps/Advantages#Discoverable), afin que le contenu soit trouvé à l'aide de moteurs de recherche. - [Installable](/fr/docs/Web/Progressive_web_apps/Advantages#Installable), afin d'être disponible sur l'écran d'accueil de l'appareil. -- [Linkable](/fr/docs/Web/Progressive_web_apps/Advantages#Linkable), afin que vous puissiez la partager simplement en envoyant un lien. +- [Linkable](/fr/docs/Web/Progressive_web_apps/Advantages#Linkable), afin que vous puissiez la partager simplement en envoyant un lien. - [Network independent](/fr/docs/Web/Progressive_web_apps/Advantages#Network_independent), afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet. - [Progressive](/fr/docs/Web/Progressive_web_apps/Advantages#Progressive), afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers. - [Re-engageable](/fr/docs/Web/Progressive_web_apps/Advantages#Re-engageable), afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible. @@ -49,7 +49,7 @@ Il y a des principes clés qu'une application web devrait suivre afin d'être id Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple: - Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des [Service Workers](/fr/docs/Web/API/Service_Worker_API), s'accompagnant aussi par une économie précieuse de bande passante et de temps. -- La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau. +- La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau. - Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc. - Les utilisateurs sont plus engagés grâce à un système de notifications et de messages _push_, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés. @@ -63,7 +63,7 @@ Vous pouvez consulter la liste sur [pwa.rocks](https://pwa.rocks/) pour plus d'e Vous pouvez même générer des PWA en ligne à l'aide du site web [PWABuilder](https://www.pwabuilder.com/). -Pour les informations spécifiques aux _service workers_ et aux notifications _push_, consultez le [Service Worker Cookbook](https://serviceworke.rs/), une collection d'exemples utilisant des _service workers_. +Pour les informations spécifiques aux _service workers_ et aux notifications _push_, consultez le [Service Worker Cookbook](https://serviceworke.rs/), une collection d'exemples utilisant des _service workers_. Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application. diff --git a/files/fr/web/progressive_web_apps/loading/index.md b/files/fr/web/progressive_web_apps/loading/index.md index 91b2a90e4b..dc07a9dbd4 100644 --- a/files/fr/web/progressive_web_apps/loading/index.md +++ b/files/fr/web/progressive_web_apps/loading/index.md @@ -12,7 +12,7 @@ Dans les articles précédents, nous avons abordé les APIs qui nous aident à f ## Première visualisation signifiante -Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné. +Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné. Ceci peut être réalisé grâce au chargement progressif — également appelé [Lazy loading](https://en.wikipedia.org/wiki/Lazy_loading). Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience. @@ -144,7 +144,7 @@ Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargemen Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas. -Nous pourrions réécrire le processus de chargement pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs. +Nous pourrions réécrire le processus de chargement pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs. ## Conclusion diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.md b/files/fr/web/progressive_web_apps/offline_service_workers/index.md index e4a376c6cb..dae15b064c 100644 --- a/files/fr/web/progressive_web_apps/offline_service_workers/index.md +++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.md @@ -16,7 +16,7 @@ Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que ## Les Service workers expliqués -Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion. +Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion. Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les [Promise](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). @@ -42,7 +42,7 @@ Assez de théorie — voyons un peu de code source ! Commençons par regarder le code qui enregistre un nouveau Service Worker, dans le fichier app.js: -**NOTE** : Nous utilisons la syntaxe des **fonctions flèchées** pour l'implémentation du Service Worker +**NOTE** : Nous utilisons la syntaxe des **fonctions flèchées** pour l'implémentation du Service Worker ```js if('serviceWorker' in navigator) { @@ -50,11 +50,11 @@ if('serviceWorker' in navigator) { }; ``` -Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw\.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw\.js . +Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw\.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw\.js . ### Le cycle de vie d'un Service Worker -Une fois que l'enregistrement a été réalisé, le fichier sw\.js est automatiquement téléchargé, puis installé, et finalement activé. +Une fois que l'enregistrement a été réalisé, le fichier sw\.js est automatiquement téléchargé, puis installé, et finalement activé. #### Installation @@ -124,7 +124,7 @@ Le service worker ne s'installe pas tant que le code de `waitUntil` n'est pas ex `caches` est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le [web storage](/fr/docs/Web/API/Web_Storage_API) ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête). -Vous avez remarqué que nous n'avons pas mis en cache le fichier `game.js`. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : [Web_Periodic_Background_Synchronization_API](/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API) . +Vous avez remarqué que nous n'avons pas mis en cache le fichier `game.js`. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : [Web_Periodic_Background_Synchronization_API](/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API) . #### Activation @@ -132,7 +132,7 @@ Il y a également un événement `activate` qui est utilisé de la même façon ### Répondre aux requêtes -Nous avons également un événement `fetch` à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste: +Nous avons également un événement `fetch` à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste: ```js self.addEventListener('fetch', (e) => { @@ -165,7 +165,7 @@ Ici, nous répondons à l'événement `fetch` grâce à une fonction qui essaie La méthode {{domxref("FetchEvent.respondWith")}} prend le contrôle — c'est la partie qui agit en tant que serveur proxy entre l'application et le réseau. Ceci nous permet de répondre à chacune des requêtes avec la réponse que nous voulons: celle préparée par le Service Worker, celle récupérée dans le cache, modifiée si nécessaire. -ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés. +ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés. ## Mises à jour @@ -219,9 +219,9 @@ Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Se ## Résumé -Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. +Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. -Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article. +Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article. {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}} diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md index 75752e6e9f..2162236487 100644 --- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md @@ -70,7 +70,7 @@ Pousser (push) est plus compliqué que de faire des notifications — nous avons La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les [exemples du Cookbook des Service Workers](https://serviceworke.rs/push-payload.html), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple). -Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article [Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers). A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé. +Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article [Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers). A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé. ```js registration.pushManager.getSubscription() .then( /* ... */ ); @@ -137,7 +137,7 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey); L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog [Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/). -L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}} — la première est `userVisibleOnly: true`, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est `applicationServerKey`, qui contient notre clef VAPID une fois récupérée et convertie avec succès. +L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}} — la première est `userVisibleOnly: true`, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est `applicationServerKey`, qui contient notre clef VAPID une fois récupérée et convertie avec succès. ```js return registration.pushManager.subscribe({ @@ -183,7 +183,7 @@ document.getElementById('doIt').onclick = function() { }; ``` -Quand le bouton est cliqué, `fetch` demande au serveur d'envoyer la notification avec les paramètres suivants: `payload` est le contenu que la notification doir afficher, `delay` définit un délai en seconde avant que la notification soit affichée et `ttl` indique en seconde le temps que cette notification doit rester disponible sur le serveur. +Quand le bouton est cliqué, `fetch` demande au serveur d'envoyer la notification avec les paramètres suivants: `payload` est le contenu que la notification doir afficher, `delay` définit un délai en seconde avant que la notification soit affichée et `ttl` indique en seconde le temps que cette notification doit rester disponible sur le serveur. Au tour maintenant du fichier Javascript suivant. diff --git a/files/fr/web/security/index.md b/files/fr/web/security/index.md index 59b6db97fb..8a9fbb7160 100644 --- a/files/fr/web/security/index.md +++ b/files/fr/web/security/index.md @@ -7,7 +7,7 @@ tags: - Web translation_of: Web/Security --- -La sécurité d'un site internet ou d'une application web est essentielle. Même de simple bugs dans votre code peuvent impliquer la fuite d'informations privées et des personnes mals intentionnées essayent constamment de trouver des moyens de voler des données. Les articles sur la sécurité web listés ici fournissent des informations qui devraient vous aider à sécuriser votre site et rendre votre code plus sûr contre les attaques et vols de données. +La sécurité d'un site internet ou d'une application web est essentielle. Même de simple bugs dans votre code peuvent impliquer la fuite d'informations privées et des personnes mals intentionnées essayent constamment de trouver des moyens de voler des données. Les articles sur la sécurité web listés ici fournissent des informations qui devraient vous aider à sécuriser votre site et rendre votre code plus sûr contre les attaques et vols de données. {{LandingPageListSubpages}} diff --git a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md index c69dcb0859..15505402e5 100644 --- a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md +++ b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md @@ -31,20 +31,20 @@ De plus, vous devriez envisager de supprimer tout contenu provenant d'un tiers ( Vous pouvez également atténuer ces risques en utilisant : -- L’en-tête `{{httpheader("Referrer-Policy")}}` sur votre serveur pour contrôler quelle information est envoyée par l’en-tête `Referer`. Encore une fois, une directive `no-referrer` omettrait intégralement l’en-tête `Referer`. -- L’attribut `referrerpolicy` sur les éléments HTML qui présentent des risques de fuite d'informations (comme `<img>` et `<a>`). Cet attribut peut prendre par exemple la valeur `no-referrer` afin d'empêcher l'envoi de l’en-tête `Referer`. +- L’en-tête `{{httpheader("Referrer-Policy")}}` sur votre serveur pour contrôler quelle information est envoyée par l’en-tête `Referer`. Encore une fois, une directive `no-referrer` omettrait intégralement l’en-tête `Referer`. +- L’attribut `referrerpolicy` sur les éléments HTML qui présentent des risques de fuite d'informations (comme `<img>` et `<a>`). Cet attribut peut prendre par exemple la valeur `no-referrer` afin d'empêcher l'envoi de l’en-tête `Referer`. - L’attribut `rel` défini à `noreferrer` sur les éléments HTML à risques (comme `<img>` et \<a>). Voir Types de liens et rechercher `noreferrer` pour plus d’informations. - La technique de la [page de sortie](https://geekthis.net/post/hide-http-referer-headers/#exit-page-redirect). -Les frameworks soucieux de la sécurité employés côté serveur ont tendance à inclure d'emblée des mesures d’atténuation pour résoudre ces problèmes, par exemple : +Les frameworks soucieux de la sécurité employés côté serveur ont tendance à inclure d'emblée des mesures d’atténuation pour résoudre ces problèmes, par exemple : - La sécurité dans Django (voir notamment Cross Site Request Forgery (CSRF) protection). - helmet referrer-policy — middleware pour configurer l'entête Referrer-Policy dans les applications Node.js/Express (voir aussi helmet pour plus d'aménagements liés à la sécurité). ## Politique et exigences. -Il serait pertinent de rédiger pour votre (vos) équipe(s) de projet un ensemble d’exigences en matière de sécurité et de protection des renseignements personnels en en précisant l’utilisation dans le cadre de l'atténuation des risques. Vous devriez demander l’aide d’un expert en sécurité Web pour rédiger ces exigences en tenant compte à la fois des besoins et du bien-être des utilisateurs, ainsi que d’autres questions liées à la législation et la réglementation comme le [Réglement Général à la Protection des Données de l'Union Européenne](https://ec.europa.eu/info/law/law-topic/data-protection/eu-data-protection-rules_fr). +Il serait pertinent de rédiger pour votre (vos) équipe(s) de projet un ensemble d’exigences en matière de sécurité et de protection des renseignements personnels en en précisant l’utilisation dans le cadre de l'atténuation des risques. Vous devriez demander l’aide d’un expert en sécurité Web pour rédiger ces exigences en tenant compte à la fois des besoins et du bien-être des utilisateurs, ainsi que d’autres questions liées à la législation et la réglementation comme le [Réglement Général à la Protection des Données de l'Union Européenne](https://ec.europa.eu/info/law/law-topic/data-protection/eu-data-protection-rules_fr). ## Voir aussi -- [Lignes directrices de l'équipe de sécurité de Mozilla sur Referrer-Policy](https://infosec.mozilla.org/guidelines/web_security.html#referrer-policy) +- [Lignes directrices de l'équipe de sécurité de Mozilla sur Referrer-Policy](https://infosec.mozilla.org/guidelines/web_security.html#referrer-policy) diff --git a/files/fr/web/security/same-origin_policy/index.md b/files/fr/web/security/same-origin_policy/index.md index ce2a713f38..8240c92a1b 100644 --- a/files/fr/web/security/same-origin_policy/index.md +++ b/files/fr/web/security/same-origin_policy/index.md @@ -62,9 +62,9 @@ Utiliser [CORS](/fr/docs/HTTP/Access_control_CORS) pour autoriser l'accès cross ## Accès script cross-origin -Les APIs JavaScript comme [`iframe.contentWindow`](/fr/docs/DOM/HTMLIFrameElement), [`window.parent`](/fr/docs/DOM/window.parent), [`window.open`](/fr/docs/DOM/window.open) et [`window.opener`](/fr/docs/DOM/window.opener) autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets [Window](http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window) et [Location](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location). Certains navigateurs [permettent l'accès à plus de propriétés](https://bugzilla.mozilla.org/show_bug.cgi?id=839867) que ce que les spécifications permettent. À la place, vous pouvez utiliser [`window.postMessage`](/fr/docs/DOM/window.postMessage) pour communiquer entre deux documents. +Les APIs JavaScript comme [`iframe.contentWindow`](/fr/docs/DOM/HTMLIFrameElement), [`window.parent`](/fr/docs/DOM/window.parent), [`window.open`](/fr/docs/DOM/window.open) et [`window.opener`](/fr/docs/DOM/window.opener) autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets [Window](http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window) et [Location](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location). Certains navigateurs [permettent l'accès à plus de propriétés](https://bugzilla.mozilla.org/show_bug.cgi?id=839867) que ce que les spécifications permettent. À la place, vous pouvez utiliser [`window.postMessage`](/fr/docs/DOM/window.postMessage) pour communiquer entre deux documents. ## Voir aussi -- [Same-origin policy for file: URIs](/en/Same-origin_policy_for_file:_URIs) +- [Same-origin policy for file: URIs](/en/Same-origin_policy_for_file:_URIs) - [Same-Origin Policy at W3C](http://www.w3.org/Security/wiki/Same_Origin_Policy) diff --git a/files/fr/web/security/secure_contexts/index.md b/files/fr/web/security/secure_contexts/index.md index 4a1174042c..6129e98802 100644 --- a/files/fr/web/security/secure_contexts/index.md +++ b/files/fr/web/security/secure_contexts/index.md @@ -3,7 +3,7 @@ title: Secure Contexts slug: Web/Security/Secure_Contexts translation_of: Web/Security/Secure_Contexts --- -Un navigateur entre dans un **contexte sécurisé** quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur. +Un navigateur entre dans un **contexte sécurisé** quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur. @@ -19,9 +19,9 @@ Certaines APIs du web peuvent donner beaucoup de pouvoir à un attaqueur, lui pe Un contexte sera considéré comme sécurisé s'il est servi locallement, ou depuis un serveur sécurisé. Un contexte qui n'est pas à la racine (une page qui n'est pas dans une fenêtre, iframe, ...) doit avoir tous ses contextes parents sécurisés. -Les fichiers servis locallement avec des chemins comme *http\://localhost* et *file://* sont considérés sécurisés. +Les fichiers servis locallement avec des chemins comme *http\://localhost* et *file://* sont considérés sécurisés. -Les contextes qui ne sont pas servis locallement doivent être servis avec *https\://* ou *wss\://* et les protocoles utilisés ne doivent pas être considérés obsolètes. +Les contextes qui ne sont pas servis locallement doivent être servis avec *https\://* ou *wss\://* et les protocoles utilisés ne doivent pas être considérés obsolètes. ## Détection des fonctionnalités @@ -29,14 +29,14 @@ Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si e ```js if (window.isSecureContext) { - // La page est dans un contexte sécurisé, les services workers sont disponibles. + // La page est dans un contexte sécurisé, les services workers sont disponibles. navigator.serviceWorker.register("/offline-worker.js").then(function () { ... }); } ``` -## Quelles APIs requièrent un contexte sécurisé ? +## Quelles APIs requièrent un contexte sécurisé ? - {{SpecName('Service Workers')}} - {{SpecName('Web Bluetooth')}} @@ -56,7 +56,7 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans <table class="standard-table"> <tbody> <tr> - <td> </td> + <td></td> <td>Chrome</td> <td>Safari</td> <td>Firefox</td> @@ -71,11 +71,11 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans > </p> </td> - <td> </td> + <td></td> <td> <p> Accès temporaire uniquement (les utilisateurs ne peuvent pas choisir - "Retenir ce choix" dans la selection de permission). + "Retenir ce choix" dans la selection de permission). </p> </td> </tr> @@ -107,20 +107,20 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans <tr> <td>EME</td> <td>Avertissement de dépréciation</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Device motion / orientation</td> <td>Avertissement de dépréciation</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>MIDI</td> <td>Désactivé</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td><em>{{SpecName('Web Crypto API')}}</em></td> @@ -130,13 +130,13 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans antérieur</em > </td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> </tbody> </table> -Pour vérifier le support de votre navigateur, utilisez le site: http\://permission.site +Pour vérifier le support de votre navigateur, utilisez le site: http\://permission.site _Note: Safari et Chrome ne supportent pas complètement la spécification des Secure Contexts, certaines APIs peuvent fonctionner avec des iframes utilisant du HTTPS dans une page utilisant du HTTP ou dans une page qui a un contexte ouvert avec une page non sécurisée (c'est le cas quand une page utilisant du HTTP utilise window\.open ou target="\_blank")._ diff --git a/files/fr/web/security/subresource_integrity/index.md b/files/fr/web/security/subresource_integrity/index.md index 45de2fed51..0a3da9381d 100644 --- a/files/fr/web/security/subresource_integrity/index.md +++ b/files/fr/web/security/subresource_integrity/index.md @@ -33,7 +33,7 @@ Voici un exemple de valeur pour l'attribut **`integrity`** avec un hash sha384 e Vous pouvez générer des _hashes_ SRI en ligne de commande avec OpenSSL en utilisant une commande de ce genre : ```bash -cat FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A +cat FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A ``` Il existe également, **SRI Hash Generator** : <https://srihash.org/> qui est un utilitaire en ligne permettant de générer des _hashes_ SRI. @@ -65,8 +65,8 @@ Les navigateurs gèrent SRI en effectuant les étapes suivantes : | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------------------- | ------------ | -| {{SpecName('Subresource Integrity')}} | {{Spec2('Subresource Integrity')}} | | -| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | | +| {{SpecName('Subresource Integrity')}} | {{Spec2('Subresource Integrity')}} | | +| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md index 2cafc5a036..01fd6f0005 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md @@ -113,7 +113,7 @@ Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils af ```js function toggleRadius() { var circle = document.getElementById("circle"); - circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; } ``` @@ -165,20 +165,20 @@ Et encore d'autres filtres : ```html <svg height="0"> <filter id="f3"> - <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" - order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> - </filter> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> <filter id="f4"> - <feSpecularLighting surfaceScale="5" specularConstant="1" - specularExponent="10" lighting-color="white"> - <fePointLight x="-5000" y="-10000" z="20000"/> - </feSpecularLighting> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> </filter> <filter id="f5"> - <feColorMatrix values="1 0 0 0 0 - 0 1 0 0 0 - 0 0 1 0 0 - 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> </filter> </svg> ``` diff --git a/files/fr/web/svg/attribute/clip-path/index.md b/files/fr/web/svg/attribute/clip-path/index.md index 2fb54eb510..18cac09939 100644 --- a/files/fr/web/svg/attribute/clip-path/index.md +++ b/files/fr/web/svg/attribute/clip-path/index.md @@ -71,7 +71,7 @@ html,body,svg { height:100% } </table> - \<geometry-box> - - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. + - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. > **Note :** Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}. diff --git a/files/fr/web/svg/attribute/color/index.md b/files/fr/web/svg/attribute/color/index.md index 1dc36653d5..2a7c8a69af 100644 --- a/files/fr/web/svg/attribute/color/index.md +++ b/files/fr/web/svg/attribute/color/index.md @@ -62,7 +62,7 @@ L'attribut `color` est utilisé pour définir indirectement une valeur potentiel Les éléments suivants peuvent utiliser l'attribut `color`: - [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") » -- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » +- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » - {{ SVGElement("stop") }} - {{ SVGElement("feFlood") }} - {{ SVGElement("feDiffuseLighting") }} diff --git a/files/fr/web/svg/attribute/core/index.md b/files/fr/web/svg/attribute/core/index.md index 68eba8a13f..ec5027b655 100644 --- a/files/fr/web/svg/attribute/core/index.md +++ b/files/fr/web/svg/attribute/core/index.md @@ -3,7 +3,7 @@ title: Attributs SVG de base slug: Web/SVG/Attribute/Core translation_of: Web/SVG/Attribute/Core --- -Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. +Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. - `id` - `lang` @@ -19,7 +19,7 @@ Les _attributs SVG de base_ sont tous les attributs communs pouvant être spé _Valuer_: Tout ID valide; _Animation_: **Non** - {{SVGAttr('lang')}} - - : Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). + - : Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`. diff --git a/files/fr/web/svg/attribute/cx/index.md b/files/fr/web/svg/attribute/cx/index.md index 6738645445..234bcc8e97 100644 --- a/files/fr/web/svg/attribute/cx/index.md +++ b/files/fr/web/svg/attribute/cx/index.md @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cx` définit la coordonnées x de ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md index bfc3a0704a..7f4ab447d9 100644 --- a/files/fr/web/svg/attribute/cy/index.md +++ b/files/fr/web/svg/attribute/cy/index.md @@ -25,7 +25,7 @@ html,body,svg { height:100% } <stop offset="100%" stop-color="black" /> </radialGradient> - <circle cy="50" cx="50" r="45"/> + <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> </svg> @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de s ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md index 45b5d6043d..8fcaeb7919 100644 --- a/files/fr/web/svg/attribute/d/index.md +++ b/files/fr/web/svg/attribute/d/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/d --- {{SVGRef}} -L'attribut **`d`** définit un tracé à dessiner. +L'attribut **`d`** définit un tracé à dessiner. La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous. -Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} +Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} ## Exemple @@ -22,7 +22,7 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <path fill="none" stroke="red" + <path fill="none" stroke="red" d="M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 @@ -62,7 +62,7 @@ Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient u > **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. +Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> <tbody> @@ -85,13 +85,13 @@ Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contien </tbody> </table> -> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. +> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. ## missing-glyph > **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. +Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> <tbody> @@ -128,7 +128,7 @@ SVG définit 6 types de commandes, pour un total de 20 commandes : > **Note :** Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point. -Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. +Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. ## Moveto (aller à) @@ -169,11 +169,11 @@ Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polyb ## Arcto -Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. +Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. -La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. +La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. -La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. +La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. ## ClosePath (fermer un chemin) diff --git a/files/fr/web/svg/attribute/dy/index.md b/files/fr/web/svg/attribute/dy/index.md index 6889ac8204..a8ae811c3f 100644 --- a/files/fr/web/svg/attribute/dy/index.md +++ b/files/fr/web/svg/attribute/dy/index.md @@ -20,16 +20,16 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="0" x2="100%" y1="30%" y2="30%" /> - <line x1="0" x2="100%" y1="80%" y2="80%" /> + <!-- Lignes indiquant la position des glyphes --> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="0" x2="100%" y1="30%" y2="30%" /> + <line x1="0" x2="100%" y1="80%" y2="80%" /> - <!-- Un texte de référence --> - <text x="10%" y="30%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="30%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe y --> - <text dy="50%" x="10%" y="30%">SVG</text> + <!-- Le même texte avec un décalage sur l'axe y --> + <text dy="50%" x="10%" y="30%">SVG</text> </svg> ``` @@ -186,29 +186,29 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes horizontales --> - <line x1="0" x2="100%" y1="30" y2="30" /> - <line x1="0" x2="100%" y1="40" y2="40" /> - <line x1="0" x2="100%" y1="50" y2="50" /> - <line x1="0" x2="100%" y1="60" y2="60" /> - - <!-- Lignes verticales --> - <line x1="10" x2="10" y1="0" y2="100%" /> - <line x1="50" x2="50" y1="0" y2="100%" /> - <line x1="90" x2="90" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> - <text dy="20" x="10" y="30">SVG</text> - <text dy="0 10" x="50" y="30">SVG</text> - <text dy="0 10 20" x="90" y="30">SVG</text> + <!-- Lignes horizontales --> + <line x1="0" x2="100%" y1="30" y2="30" /> + <line x1="0" x2="100%" y1="40" y2="40" /> + <line x1="0" x2="100%" y1="50" y2="50" /> + <line x1="0" x2="100%" y1="60" y2="60" /> + + <!-- Lignes verticales --> + <line x1="10" x2="10" y1="0" y2="100%" /> + <line x1="50" x2="50" y1="0" y2="100%" /> + <line x1="90" x2="90" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> + <text dy="20" x="10" y="30">SVG</text> + <text dy="0 10" x="50" y="30">SVG</text> + <text dy="0 10 20" x="90" y="30">SVG</text> </svg> ``` ```css line { - stroke: red; - stroke-width: .5px; - stroke-dasharray: 3px; + stroke: red; + stroke-width: .5px; + stroke-dasharray: 3px; } ``` diff --git a/files/fr/web/svg/attribute/fill-opacity/index.md b/files/fr/web/svg/attribute/fill-opacity/index.md index f4039449e0..34bfa8c169 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.md +++ b/files/fr/web/svg/attribute/fill-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/fill-rule/index.md b/files/fr/web/svg/attribute/fill-rule/index.md index a3e4c78a38..488eb66676 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.md +++ b/files/fr/web/svg/attribute/fill-rule/index.md @@ -23,8 +23,8 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- Valeur par défaut pour fill-rule --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> <!-- Les points au centre de la forme ont 2 @@ -33,8 +33,8 @@ html,body,svg { height:100% } dehors de la forme, et l'intérieur de l'étoile est donc vide. --> - <polygon fill-rule="evenodd" stroke="red" - points="150,0 121,90 198,35 102,35 179,90"/> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> </svg> ``` @@ -75,27 +75,27 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="nonzero" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="nonzero" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` @@ -113,27 +113,27 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="evenodd" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="evenodd" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="evenodd" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` diff --git a/files/fr/web/svg/attribute/fill/index.md b/files/fr/web/svg/attribute/fill/index.md index b90f9e2d8f..2190842df0 100644 --- a/files/fr/web/svg/attribute/fill/index.md +++ b/files/fr/web/svg/attribute/fill/index.md @@ -22,25 +22,25 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Remplir avec une simple couleur --> - <circle cx="50" cy="50" r="40" fill="pink" /> - - <!-- Remplir avec un dégradé --> - <defs> - <radialGradient id="myGradient"> - <stop offset="0%" stop-color="pink" /> - <stop offset="100%" stop-color="black" /> - </radialGradient> - </defs> - <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> - - <!-- Définit l'état final d'un cercle animé --> - <circle cx="250" cy="50" r="20"> - <animate attributeType="XML" - attributeName="r" - from="0" to="40" dur="5s" - fill="freeze" /> - </circle> + <!-- Remplir avec une simple couleur --> + <circle cx="50" cy="50" r="40" fill="pink" /> + + <!-- Remplir avec un dégradé --> + <defs> + <radialGradient id="myGradient"> + <stop offset="0%" stop-color="pink" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + </defs> + <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> + + <!-- Définit l'état final d'un cercle animé --> + <circle cx="250" cy="50" r="20"> + <animate attributeType="XML" + attributeName="r" + from="0" to="40" dur="5s" + fill="freeze" /> + </circle> </svg> ``` diff --git a/files/fr/web/svg/attribute/height/index.md b/files/fr/web/svg/attribute/height/index.md index e8b1b9f7e9..fdbe09c669 100644 --- a/files/fr/web/svg/attribute/height/index.md +++ b/files/fr/web/svg/attribute/height/index.md @@ -8,9 +8,9 @@ translation_of: Web/SVG/Attribute/height --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). +Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -83,9 +83,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `height` : +Les éléments suivants peuvent utiliser l'attribut `height` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md index f4ce9edcd6..9efefc7b37 100644 --- a/files/fr/web/svg/attribute/in/index.md +++ b/files/fr/web/svg/attribute/in/index.md @@ -68,25 +68,25 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ```html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="backgroundMultiply"> + <defs> + <filter id="backgroundMultiply"> <!-- Ça ne marchera pas. --> - <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="imageMultiply"> + <defs> + <filter id="imageMultiply"> <!-- Solution de contournement. --> - <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <feBlend in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> </svg> </div> ``` @@ -95,7 +95,7 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ## Éléments -Les éléments suivants peuvent utiliser l'attribut `in`: +Les éléments suivants peuvent utiliser l'attribut `in`: - {{SVGElement("feBlend")}} - {{SVGElement("feColorMatrix")}} diff --git a/files/fr/web/svg/attribute/points/index.md b/files/fr/web/svg/attribute/points/index.md index 3f3012b7f7..7e43cf8592 100644 --- a/files/fr/web/svg/attribute/points/index.md +++ b/files/fr/web/svg/attribute/points/index.md @@ -18,7 +18,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon est une forme fermée --> @@ -67,7 +67,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> ``` @@ -106,7 +106,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon est une forme fermée --> - <polygon stroke="black" fill="none" + <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/presentation/index.md b/files/fr/web/svg/attribute/presentation/index.md index 7eef5286d7..cd8967d169 100644 --- a/files/fr/web/svg/attribute/presentation/index.md +++ b/files/fr/web/svg/attribute/presentation/index.md @@ -260,7 +260,7 @@ Les _attributs SVG de présentation_ sont des propriétés CSS pouvant être uti - : Définit la longueur des espaces entre les mots d'un texte. _Valeur_: [\<length>](/fr/SVG/Content_type#Length "https://developer.mozilla.org/en/SVG/Content_type#Length")|**`inherit`**; _Animation_: **Oui** - **{{SVGAttr('writing-mode')}}** - - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. + - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. _Valeur_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animation_: **Oui** ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md index a1a659221d..6593ce1f7b 100644 --- a/files/fr/web/svg/attribute/seed/index.md +++ b/files/fr/web/svg/attribute/seed/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/seed --- « [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute "en/SVG/Attribute") -L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. +L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**. diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md index 104acab79c..5a07fea97b 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.md +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md @@ -6,11 +6,11 @@ tags: - SVG translation_of: Web/SVG/Attribute/stroke-dasharray --- -L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. +L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. > **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray` peut aussi être utilisé directement dans une feuille de style CSS. -Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} ## Exemple @@ -59,7 +59,7 @@ html,body,svg { height:100% } </table> - \<dasharray> - - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**. + - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.md b/files/fr/web/svg/attribute/stroke-dashoffset/index.md index a256af04fc..9961fe37a6 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.md @@ -22,43 +22,43 @@ html,body,svg { height:100% } ```html <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de tiret --> - <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <!-- Pas de tiret --> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> - <!-- Pas de décalage --> - <line x1="0" y1="3" x2="30" y2="3" stroke="black" - stroke-dasharray="3 1" /> + <!-- Pas de décalage --> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" + stroke-dasharray="3 1" /> - <!-- - Le début des tirets est décalé + <!-- + Le début des tirets est décalé de 3 unités vers la gauche - --> - <line x1="0" y1="5" x2="30" y2="5" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="3" /> - - <!-- - Le début des tirets est décalé - de 3 unités vers la droite (-3) - --> - <line x1="0" y1="7" x2="30" y2="7" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="-3" /> - - <!-- + --> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="3" /> + + <!-- + Le début des tirets est décalé + de 3 unités vers la droite (-3) + --> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="-3" /> + + <!-- Le début des tirets est décalé de 1 unité vers la gauche ce qui affiche la même chose que l'exemple précédent - --> - <line x1="0" y1="9" x2="30" y2="9" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="1" /> - - <!-- - Lignes rouges pour indiquer la position - de départ des tirets - --> - <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> + --> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="1" /> + + <!-- + Lignes rouges pour indiquer la position + de départ des tirets + --> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md index 82531a2d55..b9366c8aac 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.md +++ b/files/fr/web/svg/attribute/stroke-linecap/index.md @@ -23,23 +23,23 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" (valeur par défaut) --> - <line x1="1" y1="1" x2="5" y2="1" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" (valeur par défaut) --> + <line x1="1" y1="1" x2="5" y2="1" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "round" --> - <line x1="1" y1="3" x2="5" y2="3" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <line x1="1" y1="3" x2="5" y2="3" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "square" --> - <line x1="1" y1="5" x2="5" y2="5" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <line x1="1" y1="5" x2="5" y2="5" stroke="black" + stroke-linecap="square" /> - <!-- + <!-- Les lignes roses indiquent la position du chemin pour chaque trait - --> - <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> ``` @@ -77,20 +77,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="butt" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -112,20 +112,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "round" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="round" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -147,19 +147,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "square" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="square" /> - <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="square" /> - <!-- - Les lignes roses indiquent la position - du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <!-- + Les lignes roses indiquent la position + du chemin pour chaque trait + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.md b/files/fr/web/svg/attribute/stroke-linejoin/index.md index 2794f48e80..bf94dd23d8 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.md +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.md @@ -22,58 +22,58 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> - <!-- - Chemin en haut à gauche: - Effet de la valeur "miter" - --> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter" /> - - <!-- - Chemin en haut au milieu: - Effet de la valeur "round" - --> - <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="round" /> - - <!-- - Chemin en haut à droite: - Effet de la valeur "bevel" - --> - <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="bevel" /> - - <!-- - Chemin en bas à gauche: - Effet de la valeur "miter-clip" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter-clip" /> - - <!-- - Chemin en bas à droite: - Effet de la valeur "arcs" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="arcs" /> - - <!-- - Lignes roses qui indiquent la position - du chemin pour chaque trait - --> - <g id="highlight"> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5.5" r="0.05" fill="pink" /> - </g> - <use xlink:href="#highlight" x="6" /> - <use xlink:href="#highlight" x="12" /> - <use xlink:href="#highlight" x="2" y="6" /> - <use xlink:href="#highlight" x="8" y="6" /> + <!-- + Chemin en haut à gauche: + Effet de la valeur "miter" + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- + Chemin en haut au milieu: + Effet de la valeur "round" + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + Chemin en haut à droite: + Effet de la valeur "bevel" + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + Chemin en bas à gauche: + Effet de la valeur "miter-clip" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- + Chemin en bas à droite: + Effet de la valeur "arcs" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + <!-- + Lignes roses qui indiquent la position + du chemin pour chaque trait + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> </svg> ``` @@ -120,7 +120,7 @@ html,body,svg { height:100% } stroke-linejoin="arcs" /> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g id="p"> @@ -195,7 +195,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> @@ -244,7 +244,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.md b/files/fr/web/svg/attribute/stroke-opacity/index.md index 7eababea65..c840462907 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.md +++ b/files/fr/web/svg/attribute/stroke-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}. diff --git a/files/fr/web/svg/attribute/stroke-width/index.md b/files/fr/web/svg/attribute/stroke-width/index.md index a80300ad2a..3ccc50b247 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.md +++ b/files/fr/web/svg/attribute/stroke-width/index.md @@ -46,7 +46,7 @@ html,body,svg { height:100% } <td> <strong ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong - > | + > | <strong ><a href="/docs/Web/SVG/Content_type#Percentage" ><percentage></a @@ -65,7 +65,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée. diff --git a/files/fr/web/svg/attribute/transform/index.md b/files/fr/web/svg/attribute/transform/index.md index c5e38b93b8..2083854ea3 100644 --- a/files/fr/web/svg/attribute/transform/index.md +++ b/files/fr/web/svg/attribute/transform/index.md @@ -18,15 +18,15 @@ html,body,svg { height:100% } ```html <svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <g fill="grey" + <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> - <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> - </g> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> - <use xlink:href="#heart" fill="none" stroke="red"/> + <use xlink:href="#heart" fill="none" stroke="red"/> </svg> ``` @@ -126,20 +126,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de translation --> - <rect x="5" y="5" width="40" height="40" fill="green" /> + <!-- Pas de translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> - <!-- Translation horizontale --> - <rect x="5" y="5" width="40" height="40" fill="blue" - transform="translate(50)" /> + <!-- Translation horizontale --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> - <!-- Translation verticale --> - <rect x="5" y="5" width="40" height="40" fill="red" - transform="translate(0 50)" /> + <!-- Translation verticale --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> - <!-- Translation horizontale et verticale --> - <rect x="5" y="5" width="40" height="40" fill="yellow" - transform="translate(50,50)" /> + <!-- Translation horizontale et verticale --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> </svg> ``` @@ -157,20 +157,20 @@ html,body,svg { height:100% } ```html <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- uniform scale --> - <circle cx="0" cy="0" r="10" fill="red" - transform="scale(4)" /> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> - <!-- vertical scale --> - <circle cx="0" cy="0" r="10" fill="yellow" - transform="scale(1,4)" /> + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> - <!-- horizontal scale --> - <circle cx="0" cy="0" r="10" fill="pink" - transform="scale(4,1)" /> + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> - <!-- No scale --> - <circle cx="0" cy="0" r="10" fill="black" /> + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> </svg> ``` @@ -188,15 +188,15 @@ html,body,svg { height:100% } ```html <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> - <rect x="0" y="0" width="10" height="10" /> + <rect x="0" y="0" width="10" height="10" /> - <!-- rotation is done around the point 0,0 --> - <rect x="0" y="0" width="10" height="10" fill="red" - transform="rotate(100)" /> + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> - <!-- rotation is done around the point 10,10 --> - <rect x="0" y="0" width="10" height="10" fill="green" - transform="rotate(100,10,10)" /> + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> </svg> ``` @@ -214,10 +214,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewX(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> </svg> ``` @@ -235,10 +235,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewY(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md index 2ade5dcb69..eb859254cf 100644 --- a/files/fr/web/svg/attribute/viewbox/index.md +++ b/files/fr/web/svg/attribute/viewbox/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/viewBox --- « [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute) -L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. +L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. -La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. +La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. -Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. +Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. ## Contexte d'utilisation @@ -43,17 +43,17 @@ Les valeurs négatives de `width` et `height` ne sont pas autorisées et une va ## Exemple -Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : +Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : `<svg width="300" height="200"></svg>` -En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : +En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : `<svg width="300" height="200" viewBox="0 0 30 20"></svg>` ## Elements -Les éléments suivants peuvent utiliser l'attribut `viewBox` +Les éléments suivants peuvent utiliser l'attribut `viewBox` - {{ SVGElement("svg") }} - {{ SVGElement("symbol") }} diff --git a/files/fr/web/svg/attribute/width/index.md b/files/fr/web/svg/attribute/width/index.md index f86b517005..21d79085c8 100644 --- a/files/fr/web/svg/attribute/width/index.md +++ b/files/fr/web/svg/attribute/width/index.md @@ -5,9 +5,9 @@ translation_of: Web/SVG/Attribute/width --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). +Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -80,9 +80,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `width` : +Les éléments suivants peuvent utiliser l'attribut `width` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} diff --git a/files/fr/web/svg/element/animatetransform/index.md b/files/fr/web/svg/element/animatetransform/index.md index f8eec01ee7..3b8992f730 100644 --- a/files/fr/web/svg/element/animatetransform/index.md +++ b/files/fr/web/svg/element/animatetransform/index.md @@ -48,7 +48,7 @@ L'élément **`<animateTransform>`** permet d'animer un élement en appliquant u - [Attributs de ciblage d'animation](/fr/docs/SVG/Attribute#AnimationAttributeTarget "en/SVG/Attribute#AnimationAttributeTarget") » - [Attributs de chronométrage d'animation](/fr/docs/SVG/Attribute#AnimationTiming "en/SVG/Attribute#AnimationTiming") » - [Attributs de valeur d'animation](/fr/docs/SVG/Attribute#AnimationValue "en/SVG/Attribute#AnimationValue") » -- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » +- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » - {{ SVGAttr("externalResourcesRequired") }} ### Attributs spécifiques diff --git a/files/fr/web/svg/element/clippath/index.md b/files/fr/web/svg/element/clippath/index.md index 562237cd56..2fa4a9737e 100644 --- a/files/fr/web/svg/element/clippath/index.md +++ b/files/fr/web/svg/element/clippath/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/clipPath --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées. @@ -20,19 +20,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100"> - <clipPath id="myClip"> + <clipPath id="myClip"> <!-- La forme créée par le détourage est un simple cercle. --> - <circle cx="40" cy="35" r="35" /> - </clipPath> + <circle cx="40" cy="35" r="35" /> + </clipPath> <!-- Le coeur sans détourage, pour référence --> - <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> + <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> <!-- Le coeur avec détourage. Seule la partie à l'intérieur du cercle est visible. --> - <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> + <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> </svg> ``` @@ -59,7 +59,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi - {{SVGAttr("clipPathUnits")}} - : Cet attribut définit le système de coordonnées pour le contenu de l'élément `<clipPath>`. - _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** ### Attributs globaux @@ -80,7 +80,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | | {{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/defs/index.md b/files/fr/web/svg/element/defs/index.md index 91f0b9ebe4..cf10e952db 100644 --- a/files/fr/web/svg/element/defs/index.md +++ b/files/fr/web/svg/element/defs/index.md @@ -27,7 +27,7 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( </linearGradient> </defs> - <rect x="10" y="10" width="60" height="10" + <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg> ``` @@ -36,10 +36,10 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -57,7 +57,7 @@ Cet élément est implémenté par l'interface [`SVGDefsElement`](/fr/docs/Web/A | Spécification | Status | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/desc/index.md b/files/fr/web/svg/element/desc/index.md index e40cec135f..e905577409 100644 --- a/files/fr/web/svg/element/desc/index.md +++ b/files/fr/web/svg/element/desc/index.md @@ -21,7 +21,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -29,7 +29,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form _(Aucun)_ -## Interface DOM +## Interface DOM Cet élément implémente l'interface [`SVGDescElement`](/fr/docs/Web/API/SVGDescElement "en/DOM/SVGDescElement"). diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md index 8f5721456c..c9c210d70d 100644 --- a/files/fr/web/svg/element/ellipse/index.md +++ b/files/fr/web/svg/element/ellipse/index.md @@ -64,7 +64,7 @@ L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipse | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------- | -| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | +| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | | {{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Interface DOM diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.md b/files/fr/web/svg/element/fecomponenttransfer/index.md index 5db55d9aa2..07497c5713 100644 --- a/files/fr/web/svg/element/fecomponenttransfer/index.md +++ b/files/fr/web/svg/element/fecomponenttransfer/index.md @@ -40,7 +40,7 @@ Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement") ### SVG ```html -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> @@ -112,7 +112,7 @@ rect { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | +| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | | {{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feconvolvematrix/index.md b/files/fr/web/svg/element/feconvolvematrix/index.md index f2845a66d0..4d1ba5a071 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.md +++ b/files/fr/web/svg/element/feconvolvematrix/index.md @@ -13,13 +13,13 @@ La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feConvolveMatrix>`** applique Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est : -COLOR<sub>X,Y</sub> = ( - SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { - SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { - SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> - } - } - ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> +COLOR<sub>X,Y</sub> = ( + SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { + SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { + SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> + } + } + ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> dans laquelle @@ -112,7 +112,7 @@ Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feimage/index.md b/files/fr/web/svg/element/feimage/index.md index f6c00eac7e..8acb56e010 100644 --- a/files/fr/web/svg/element/feimage/index.md +++ b/files/fr/web/svg/element/feimage/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/feImage --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/femergenode/index.md b/files/fr/web/svg/element/femergenode/index.md index 92de098015..32b4816929 100644 --- a/files/fr/web/svg/element/femergenode/index.md +++ b/files/fr/web/svg/element/femergenode/index.md @@ -19,22 +19,22 @@ L'élément SVG `feMergeNode` se place à l'intérieur d'un élément {{ SVGElem ```html <svg width="200" height="200" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <filter id="feOffset" x="-40" y="-20" width="100" height="200"> - <feOffset in="SourceGraphic" dx="60" dy="60" /> - <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> - <feMerge> - <feMergeNode in="blur2" /> - <feMergeNode in="SourceGraphic" /> - </feMerge> - </filter> + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="feOffset" x="-40" y="-20" width="100" height="200"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> + <feMerge> + <feMergeNode in="blur2" /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green; filter: url(#feOffset);" /> + style="stroke: #000000; fill: green; filter: url(#feOffset);" /> <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green;" /> + style="stroke: #000000; fill: green;" /> </svg> ``` @@ -60,7 +60,7 @@ Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | +| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | | {{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/fespecularlighting/index.md b/files/fr/web/svg/element/fespecularlighting/index.md index 017f6ca8c1..0705102ae5 100644 --- a/files/fr/web/svg/element/fespecularlighting/index.md +++ b/files/fr/web/svg/element/fespecularlighting/index.md @@ -45,15 +45,15 @@ Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")} ```html <svg height="200" width="200" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> - <filter id = "filter"> - <feSpecularLighting result="specOut" - specularExponent="20" lighting-color="#bbbbbb"> - <fePointLight x="50" y="75" z="200"/> - </feSpecularLighting> - <feComposite in="SourceGraphic" in2="specOut" + <filter id = "filter"> + <feSpecularLighting result="specOut" + specularExponent= + <fePointLight x="50 + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> - </filter> - <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> + </filter> + <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> ``` diff --git a/files/fr/web/svg/element/fetile/index.md b/files/fr/web/svg/element/fetile/index.md index 91e0f2b32b..5f366d23c7 100644 --- a/files/fr/web/svg/element/fetile/index.md +++ b/files/fr/web/svg/element/fetile/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/feTile --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/filter/index.md b/files/fr/web/svg/element/filter/index.md index 057f4f1e2f..8ca9abeb33 100644 --- a/files/fr/web/svg/element/filter/index.md +++ b/files/fr/web/svg/element/filter/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/filter --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. ## Contexte d'utilisation @@ -68,7 +68,7 @@ Cet élément implémente l'interface {{domxref("SVGFilterElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/foreignobject/index.md b/files/fr/web/svg/element/foreignobject/index.md index f8fd0abdb3..9475ba5ad3 100644 --- a/files/fr/web/svg/element/foreignobject/index.md +++ b/files/fr/web/svg/element/foreignobject/index.md @@ -90,7 +90,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/g/index.md b/files/fr/web/svg/element/g/index.md index 36c51f798f..3ef07cf2e5 100644 --- a/files/fr/web/svg/element/g/index.md +++ b/files/fr/web/svg/element/g/index.md @@ -10,9 +10,9 @@ translation_of: Web/SVG/Element/g --- {{SVGRef}} -L'élément `g` est un conteneur utilisé pour grouper des objets. +L'élément `g` est un conteneur utilisé pour grouper des objets. -Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. +Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. ## Exemple @@ -59,7 +59,7 @@ Cet élément n'a que des attributs globaux | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "struct.html#Groups", "<g>")}} | {{Spec2("SVG1.1")}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md index 93360395cf..7119f086c9 100644 --- a/files/fr/web/svg/element/line/index.md +++ b/files/fr/web/svg/element/line/index.md @@ -39,13 +39,13 @@ html,body,svg { height:100% } ### Attributs globaux -- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; -- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; -- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; +- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; +- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; - [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; -- {{ SVGAttr("class") }} ; -- {{ SVGAttr("style") }} ; -- {{ SVGAttr("externalResourcesRequired") }} ; +- {{ SVGAttr("class") }} ; +- {{ SVGAttr("style") }} ; +- {{ SVGAttr("externalResourcesRequired") }} ; - {{ SVGAttr("transform") }}. ### Attributs spécifiques @@ -65,5 +65,5 @@ Cet élément implémente l'interface [`SVGLineElement`](/fr/DOM/SVGLineElement ## Voir aussi -- {{ SVGElement("polygon") }} ; +- {{ SVGElement("polygon") }} ; - {{ SVGElement("path") }}. diff --git a/files/fr/web/svg/element/lineargradient/index.md b/files/fr/web/svg/element/lineargradient/index.md index 1d3fe8a442..14c117b7ec 100644 --- a/files/fr/web/svg/element/lineargradient/index.md +++ b/files/fr/web/svg/element/lineargradient/index.md @@ -64,7 +64,7 @@ Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}. | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/marker/index.md b/files/fr/web/svg/element/marker/index.md index edd0f179ac..41bc74cdbd 100644 --- a/files/fr/web/svg/element/marker/index.md +++ b/files/fr/web/svg/element/marker/index.md @@ -20,28 +20,28 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <defs> + <defs> <!-- Définit une pointe de flèche --> - <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" - markerWidth="6" markerHeight="6" - orient="auto-start-reverse"> - <path d="M 0 0 L 10 5 L 0 10 z" /> - </marker> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="6" markerHeight="6" + tart-reverse"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> <!-- Définit un simple point --> - <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" - markerWidth="5" markerHeight="5"> - <circle cx="5" cy="5" r="5" fill="red" /> - </marker> - </defs> + <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="5" markerHeight="5"> + <circle cx="5" cy="5" r="5" fill="red" /> + </marker> + </defs> <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --> - <polyline points="10,10 10,90 90,90" fill="none" stroke="black" - marker-start="url(#arrow)" marker-end="url(#arrow)" /> + <polyline points="10,10 10,90 90,90" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- Dessine une ligne avec un simple point entre chaque segment --> - <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" - marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> + <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" + marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> ``` @@ -54,7 +54,7 @@ html,body,svg { height:100% } _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** - {{SVGAttr("markerUnits")}} - : Définit le système de coordnnées pour les attributs `markerWidth`, `markerHeight` et le contenu du `<marker>`. - _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** - {{SVGAttr("markerWidth")}} - : Définit la largeur du viewport du marqueur. _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** @@ -95,8 +95,8 @@ html,body,svg { height:100% } | Sp"cification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | -| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | +| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/mask/index.md b/files/fr/web/svg/element/mask/index.md index a7f89505b7..2ed9488e23 100644 --- a/files/fr/web/svg/element/mask/index.md +++ b/files/fr/web/svg/element/mask/index.md @@ -11,7 +11,7 @@ translation_of: Web/SVG/Element/mask --- {{SVGRef}} -L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. +L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas. @@ -80,7 +80,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | +| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | | {{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/metadata/index.md b/files/fr/web/svg/element/metadata/index.md index 329fcc2a5c..f39b3c23e0 100644 --- a/files/fr/web/svg/element/metadata/index.md +++ b/files/fr/web/svg/element/metadata/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/metadata --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. +L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/polyline/index.md b/files/fr/web/svg/element/polyline/index.md index a8052c0607..626417837b 100644 --- a/files/fr/web/svg/element/polyline/index.md +++ b/files/fr/web/svg/element/polyline/index.md @@ -98,7 +98,7 @@ Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}. | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG1.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md index baae55eed4..e1ba1e6965 100644 --- a/files/fr/web/svg/element/radialgradient/index.md +++ b/files/fr/web/svg/element/radialgradient/index.md @@ -39,7 +39,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<radialGradient>`** permet de définir un - {{SVGAttr("spreadMethod")}} - {{SVGAttr("xlink:href")}} -## DOM Interface +## DOM Interface Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}. diff --git a/files/fr/web/svg/element/rect/index.md b/files/fr/web/svg/element/rect/index.md index 99f8d22bcd..2372a4932d 100644 --- a/files/fr/web/svg/element/rect/index.md +++ b/files/fr/web/svg/element/rect/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/rect --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. +L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. ## Usage diff --git a/files/fr/web/svg/element/stop/index.md b/files/fr/web/svg/element/stop/index.md index 1cfbc01ce9..dad0fe1946 100644 --- a/files/fr/web/svg/element/stop/index.md +++ b/files/fr/web/svg/element/stop/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/stop --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. ## Contexte d'utilisation @@ -26,7 +26,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur suppléme - {{SVGAttr("stop-color")}} - {{SVGAttr("stop-opacity")}} -## DOM Interface +## DOM Interface Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. @@ -63,7 +63,7 @@ Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/style/index.md b/files/fr/web/svg/element/style/index.md index a106119925..f1ff62683c 100644 --- a/files/fr/web/svg/element/style/index.md +++ b/files/fr/web/svg/element/style/index.md @@ -42,7 +42,7 @@ Résultat en direct: ### Attributs Globaux -- [Core attributes](/fr/SVG/Attribute#Core) » +- [Core attributes](/fr/SVG/Attribute#Core) » ### Attributs Specifiques @@ -58,7 +58,7 @@ Cet élément implemente l'interface [`SVGStyleElement`](/fr/DOM/SVGStyleElement | Specification | Status | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/svg/index.md b/files/fr/web/svg/element/svg/index.md index b4c88d63f3..f24f6d9b7b 100644 --- a/files/fr/web/svg/element/svg/index.md +++ b/files/fr/web/svg/element/svg/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/svg --- {{SVGRef}} -L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. +L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. ## Contexte d'utilisation @@ -75,13 +75,13 @@ Ce fichier peut être inclus dans un document HTML5 de cette façon : ## Interface DOM -Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). +Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). ## Spécifications | Spécification | Status | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/switch/index.md b/files/fr/web/svg/element/switch/index.md index dc44f26695..6881d631ab 100644 --- a/files/fr/web/svg/element/switch/index.md +++ b/files/fr/web/svg/element/switch/index.md @@ -9,9 +9,9 @@ translation_of: Web/SVG/Element/switch --- {{SVGRef}} -L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. +L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. -Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. +Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md index 58a230af5f..f777e55bf6 100644 --- a/files/fr/web/svg/element/symbol/index.md +++ b/files/fr/web/svg/element/symbol/index.md @@ -21,20 +21,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Notre symbol a son propre système de coordonnées --> - <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> - <circle cx="1" cy="1" r="1" /> - </symbol> - - <!-- Une grille pour matérialiser le positionnement du symbole --> - <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> - - <!-- Multiples instances de notre symbole --> - <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> - <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> - <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> - <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> - <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> + <!-- Notre symbol a son propre système de coordonnées --> + <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> + <circle cx="1" cy="1" r="1" /> + </symbol> + + <!-- Une grille pour matérialiser le positionnement du symbole --> + <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> + + <!-- Multiples instances de notre symbole --> + <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> + <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> + <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> + <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> + <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> </svg> ``` diff --git a/files/fr/web/svg/element/text/index.md b/files/fr/web/svg/element/text/index.md index dafd76e9fe..e2a2054e1f 100644 --- a/files/fr/web/svg/element/text/index.md +++ b/files/fr/web/svg/element/text/index.md @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/text --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. +L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. Si du texte est écrit dans le SVG sans être intégré dans un balise \<text>, il ne sera pas affiché. Le texte n'est pas _caché_ par défaut, la propriété display ne le montre simplement pas. @@ -45,11 +45,11 @@ L'élément \<text> est utilisé pour dessiner des caractères de texte. L'exemp </svg> ``` -Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. +Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" + <text x="10" y="20" transform="rotate(30 20,40)"> SVG Text Rotation example </text> @@ -60,11 +60,11 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" - style="font-family: Times New Roman; - font-size : 24; - stroke : #00ff00; - fill : #0000ff;"> + <text x="10" y="20" + style="font-family: Times New Roman; + font-size : 24; + stroke : #00ff00; + fill : #0000ff;"> SVG text styling </text> </svg> @@ -74,10 +74,10 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ### Attributs globaux -- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} - {{ SVGAttr("externalResourcesRequired") }} @@ -96,7 +96,7 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ## Interface DOM -Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). +Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/title/index.md b/files/fr/web/svg/element/title/index.md index 8c1cafbe4c..0c98749647 100644 --- a/files/fr/web/svg/element/title/index.md +++ b/files/fr/web/svg/element/title/index.md @@ -24,7 +24,7 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -32,9 +32,9 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le _(Aucun)_ -## Interface DOM +## Interface DOM -Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). +Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). ## Exemple @@ -52,7 +52,7 @@ Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGT | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/tspan/index.md b/files/fr/web/svg/element/tspan/index.md index 074d07a4fa..c35bb8fc6c 100644 --- a/files/fr/web/svg/element/tspan/index.md +++ b/files/fr/web/svg/element/tspan/index.md @@ -69,7 +69,7 @@ Cet élément implémente l'interface [`SVGTSpanElement`](/fr/docs/Web/API/SVGTS | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}} | {{Spec2('SVG1.1')}} | Définition originale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index 6c3e975de4..6bafb70269 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -5,13 +5,13 @@ translation_of: Web/SVG/Element/use --- {{SVGRef}} -L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. +L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de _même-origine_ (c'est-à-dire le couple domaine et port identiques) pour l'élément `use` ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}. -> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. +> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. ## Contexte d'usage @@ -21,11 +21,11 @@ Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politi ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » -- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » +- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -74,7 +74,7 @@ Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md index c153279ae1..903ccf1bcb 100644 --- a/files/fr/web/svg/index.md +++ b/files/fr/web/svg/index.md @@ -20,7 +20,7 @@ translation_of: Web/SVG **[Premiers pas](/fr/SVG/Tutoriel "fr/SVG/Tutoriel")** ce tutoriel vous aidera à débuter en SVG. -SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). +SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap). @@ -46,7 +46,7 @@ SVG est une norme développée par le [World Wide Web Consortium (W3C)](https:// - : Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla. - Autres ressources - - : Voici d'autres articles à propos de SVG sur MDN : + - : Voici d'autres articles à propos de SVG sur MDN : - [Un tutoriel](/fr/docs/Web/SVG/Tutoriel "/fr/docs/Web/SVG/Tutoriel") - [Une introduction à SVG dans HTML](/fr/docs/Introduction_à_SVG_dans_HTML "/fr/docs/Introduction_à_SVG_dans_HTML") diff --git a/files/fr/web/svg/svg_animation_with_smil/index.md b/files/fr/web/svg/svg_animation_with_smil/index.md index a92f81cae3..fb2ca624bd 100644 --- a/files/fr/web/svg/svg_animation_with_smil/index.md +++ b/files/fr/web/svg/svg_animation_with_smil/index.md @@ -24,7 +24,7 @@ Pour ce faire, on utilise un élément SVG tel que {{ SVGElement("animate") }}. ## Animation pour un attribut -L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : +L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : - **`attributeName`** - : Le nom de l'attribut à animer. @@ -122,5 +122,5 @@ Le même exemple que précédemment mais avec une trajectoire courbe. ## Voir aussi - [SVG](/fr/SVG "en/SVG") -- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) -- [SMIL Specification](http://www.w3.org/TR/REC-smil) +- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) +- [SMIL Specification](http://www.w3.org/TR/REC-smil) diff --git a/files/fr/web/svg/svg_as_an_image/index.md b/files/fr/web/svg/svg_as_an_image/index.md index 52b40872b0..f46ae7df9f 100644 --- a/files/fr/web/svg/svg_as_an_image/index.md +++ b/files/fr/web/svg/svg_as_an_image/index.md @@ -30,10 +30,10 @@ Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsq - [JavaScript](/fr/docs/Web/JavaScript "JavaScript") est désactivé. - Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données. -- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. +- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. - Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés. -A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} +A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} ## Spécifications diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md index de9f5fa712..ae936d5c72 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.md +++ b/files/fr/web/svg/tutorial/basic_transformations/index.md @@ -53,7 +53,7 @@ Appliquer une rotation à un élément est assez simple : il suffit d'utiliser l </svg> ``` -Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. +Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. {{ EmbedLiveSample('Rotation', '31', '31') }} diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md index 905c2c5eaf..00dd9920c5 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.md +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.md @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages --- {{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }} -Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. +Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. Le **découpage** (_clipping_) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien. diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md index c1159e92aa..662d5036bb 100644 --- a/files/fr/web/svg/tutorial/gradients/index.md +++ b/files/fr/web/svg/tutorial/gradients/index.md @@ -159,39 +159,39 @@ Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais ```html <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> - <!-- pad --> - <radialGradient id="GradientPad" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="pad"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - - <!-- repeat --> - <radialGradient id="GradientRepeat" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="repeat"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - - <!-- reflect --> - <radialGradient id="GradientReflect" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="reflect"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - </defs> - - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> - <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> - - <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> - <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> - <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + <defs> + <!-- pad --> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + + <!-- repeat --> + <radialGradient id="Gradient + cx="0.5" cy= + spreadMethod + <stop offset="0% + <stop offset="10 + </radialGradient + + <!-- reflect --> + <radialGradient id="GradientR + cx="0.5" cy="0.5" r="0.4" fx="0. + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> </svg> ``` diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md index 35d706917c..dec87d20bd 100644 --- a/files/fr/web/svg/tutorial/introduction/index.md +++ b/files/fr/web/svg/tutorial/introduction/index.md @@ -13,7 +13,7 @@ SVG est un langage [XML](/fr/XML "XML"), assez similaire au [XHTML](/fr/XHTML "f La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript. -SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. +SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. ## Les ingrédients de base @@ -29,7 +29,7 @@ Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG co > **Note :** Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript. -Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : +Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : - Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici). - Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres. diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md index 996b502a0e..13529ed237 100644 --- a/files/fr/web/svg/tutorial/paths/index.md +++ b/files/fr/web/svg/tutorial/paths/index.md @@ -13,11 +13,11 @@ L’élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est l Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des [lignes brisées](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées) (_polylines_). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG. -La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. +La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. -Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. +Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. -De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). +De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). Les coordonnées dans l’attribut `d` sont **toujours sans unité** et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins. @@ -27,7 +27,7 @@ Il existe cinq commandes pour tracer des lignes avec un élément `<path>`. Ces ### MoveTo -La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : +La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : M x y @@ -50,7 +50,7 @@ Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à c ### LineTo, Horizontal LineTo, Vertical LineTo -Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. +Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. L x y (ou l dx dy) @@ -59,7 +59,7 @@ Il existe deux formes abrégées pour dessiner des lignes horizontales ou vertic H x (ou h dx) V y (ou v dy) -Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales : +Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales :  @@ -77,11 +77,11 @@ Afin de commencer facilement, nous allons dessiner une forme simple, un rectangl ### ClosePath -On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. +On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. Z (ou z) -Ainsi, notre chemin précédent peut se raccourcir comme ceci: +Ainsi, notre chemin précédent peut se raccourcir comme ceci: ```xml <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> @@ -103,7 +103,7 @@ Dans ces exemples, il serait probablement plus simple d’utiliser un élément ## Commandes pour les courbes -Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). +Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments `path`: l’une cubique, invoquée avec `C`, et l’autre quadratique, invoquée avec `Q`. @@ -205,7 +205,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura #### x-axis-rotation -`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple: +`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:  @@ -213,7 +213,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> - <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> + <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /> </svg> ``` @@ -269,7 +269,7 @@ Pour un rayon `rx` et un rayon `ry` donnés, il existe deux ellipses pouvant con Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles. -`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. +`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. ```html <!-- large-arc-flag: 0 --> diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md index 4f598d9087..bbfbb74002 100644 --- a/files/fr/web/svg/tutorial/patterns/index.md +++ b/files/fr/web/svg/tutorial/patterns/index.md @@ -15,24 +15,24 @@ Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissag ```html <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> ``` @@ -46,7 +46,7 @@ La partie pouvant apporter le plus de confusion avec les motifs est le système Les attributs `width` et `height` sur l'élément `pattern` décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs `x` et `y` sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin. -Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. +Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de `x` et `y` à 0.05 (10/200 = 0.05). @@ -62,29 +62,29 @@ La chose à retenir est que si l'objet change de taille, le motif lui-même sera ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -134,29 +134,29 @@ Maintenant, parce le contenu du motif utilise le même système d'unité que le ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> - <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> - <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> - <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" width=".25" height=".25" patternContent + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -208,29 +208,29 @@ Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous mod ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="10" y="10" width="50" height="50" + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md index c89a4edf3d..aa54e0b787 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.md +++ b/files/fr/web/svg/tutorial/svg_and_css/index.md @@ -39,7 +39,7 @@ Créez un nouveau document SVG en tant que fichier texte brut, `doc.svg`. Copiez </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> -<text id="caption" x="-280" y="-250">Déplacez le pointeur de +<text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> @@ -423,7 +423,7 @@ Voici comment se présente la structure du document SVG désormais. </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> - <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> + <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md index 89ee876a72..94fa8d0d03 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.md +++ b/files/fr/web/svg/tutorial/svg_fonts/index.md @@ -39,7 +39,7 @@ Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenon Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut `horiz-adv-x` définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe. -L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). +L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' `src` descriptor in `@font-face` declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead. diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md index 5070f36eca..b74d927031 100644 --- a/files/fr/web/svg/tutorial/svg_image_tag/index.md +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.md @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/SVG_Image_Tag L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG. -Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. +Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. ```xml <?xml version="1.0" standalone="no"?> @@ -27,7 +27,7 @@ Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink: Il faut prendre note de quelques point essentiels (donnés par les [spécifications W3](http://www.w3.org/TR/SVG/struct.html#ImageElement)): - Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0. -- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. +- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. - Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image. {{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }} diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md index 4f28884c41..a68c21f6d2 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md @@ -56,12 +56,12 @@ Voici le code source de cet exemple : ### Discussion -La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). +La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). -Cette approche bénéficie des points suivants en sa faveur : +Cette approche bénéficie des points suivants en sa faveur : - Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif -- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux +- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux - Elle est très simple et remplit sa fonction parfaitement - L'image se redimensionne automatiquement à la taille requise de manière intelligente - Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md index 86942d29c4..6896555e2c 100644 --- a/files/fr/web/svg/tutorial/texts/index.md +++ b/files/fr/web/svg/tutorial/texts/index.md @@ -93,9 +93,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a ```xml <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> - A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> ``` @@ -105,9 +105,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> - A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> <style>< -L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. +L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. -Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. +Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. ## Adobe Illustrator URL: [www.adobe.com/products/illustrator/](http://www.adobe.com/products/illustrator/) -Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. +Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. ## Apache Batik URL: [xmlgraphics.apache.org/batik/](http://xmlgraphics.apache.org/batik/) -Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. +Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. -En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. +En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. -Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. +Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. ### Autres moteurs de rendu -Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. +Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. ## Raphael JS URL: [raphaeljs.com](http://raphaeljs.com/) -Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. +Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. ## Snap.svg -URL: [snapsvg.io](http://snapsvg.io/) +URL: [snapsvg.io](http://snapsvg.io/) Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael. @@ -56,16 +56,16 @@ Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que URL: [www.google.com/google-d-s/drawings/](http://www.google.com/google-d-s/drawings/) -Les dessins réalisés dans Google Docs peuvent être exportés en SVG. +Les dessins réalisés dans Google Docs peuvent être exportés en SVG. ## Science -Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. +Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. -SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. +SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. ## Autres outils -Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. +Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. {{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} diff --git a/files/fr/web/web_components/using_templates_and_slots/index.md b/files/fr/web/web_components/using_templates_and_slots/index.md index 22917977ac..7c08407f11 100644 --- a/files/fr/web/web_components/using_templates_and_slots/index.md +++ b/files/fr/web/web_components/using_templates_and_slots/index.md @@ -12,7 +12,7 @@ Cet article explique comment utiliser les éléments [`<template>`](/fr/docs/Web Lorsqu'une structure de balises se répète sur une page web, il est judicieux d'utiliser un modèle plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML [`<template>`](/fr/docs/Web/HTML/Element/template) (pris en charge par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript. -Voyons un exemple simple : +Voyons un exemple simple : ```html <template id="my-paragraph"> @@ -20,7 +20,7 @@ Voyons un exemple simple : </template> ``` -Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple : +Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple : ```js let template = document.getElementById('my-paragraph'); @@ -32,7 +32,7 @@ Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des m ## Accorder modèles et composants web -Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons `<my-paragraph>` : +Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons `<my-paragraph>` : ```js customElements.define('my-paragraph', @@ -52,7 +52,7 @@ Le point important à noter est que l'on ajoute un clone du contenu du modèle Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mise en forme à l'intérieur de l'élément `<template>` dans un élément [`<style>`](/fr/docs/Web/HTML/Element/style), qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard. -Par exemple : +Par exemple : ```html <template id="my-paragraph"> @@ -73,15 +73,15 @@ On peut maintenant utiliser le modèle dans le document HTML: <my-paragraph></my-paragraph> ``` -> **Note :** Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70). +> **Note :** Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70). ## Plus de flexibilité avec les slots -Jusque-là, nous avons vu une première utilisation de l'élément `<template>`. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à [`<slot>`](/fr/docs/Web/HTML/Element/slot). Cette fonction est moins bien prise en charge que [`<template>`](/fr/docs/Web/HTML/Element/template), disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79. +Jusque-là, nous avons vu une première utilisation de l'élément `<template>`. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à [`<slot>`](/fr/docs/Web/HTML/Element/slot). Cette fonction est moins bien prise en charge que [`<template>`](/fr/docs/Web/HTML/Element/template), disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79. Les emplacements (<i lang="en">slots</i>) sont identifiés par leur attribut `name`, et permettent de définir des emplacements dans le modèle qui peuvent être alimentés avec n'importe quelle structure HTML. -Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon : +Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon : ```html <p><slot name="my-text">Texte par défaut</slot></p> @@ -89,7 +89,7 @@ Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut Si le contenu de l'emplacement n'est pas défini quand l'élément est inclus dans la page, ou si les emplacements ne sont pas pris en charge par le navigateur, `<my-paragraph>` contiendra simplement le texte statique précisé dans le modèle. -Pour définir le contenu de l'emplacement, on insère une structure HTML dans `<my-paragraph>` avec un attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple : +Pour définir le contenu de l'emplacement, on insère une structure HTML dans `<my-paragraph>` avec un attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple : ```html <my-paragraph> @@ -116,7 +116,7 @@ Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les emplaceme Pour finir, voyons un exemple un peu moins trivial. -L'ensemble de fragments de code qui suit illustre comment utiliser [`<slot>`](/fr/docs/Web/HTML/Element/slot) avec [`<template>`](/fr/docs/Web/HTML/Element/template) et un peu de JavaScript afin de : +L'ensemble de fragments de code qui suit illustre comment utiliser [`<slot>`](/fr/docs/Web/HTML/Element/slot) avec [`<template>`](/fr/docs/Web/HTML/Element/template) et un peu de JavaScript afin de : - Créer un élément **`<element-details>`** avec des [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) à [la racine virtuelle (`ShadowRoot`)](/fr/docs/Web/API/ShadowRoot) - Concevoir l'élément **`<element-details>`** afin que, lorsqu'il est utilisé dans les documents, il soit rendu en composant le contenu de l'élément avec le contenu de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, les parties du contenu de l'élément seront utilisées afin de remplir [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) dans sa [racine virtuelle](/fr/docs/Web/API/ShadowRoot) @@ -129,7 +129,7 @@ De plus, même si l'élément n'est pas déjà rendu, le rôle de conteneur port ### Créer un modèle avec des emplacements -Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template) afin de créer notre nouveau [fragment de document](/fr/docs/Web/API/DocumentFragment) "element-details-template" qui contient quelques [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : +Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template) afin de créer notre nouveau [fragment de document](/fr/docs/Web/API/DocumentFragment) "element-details-template" qui contient quelques [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : ```html <template id="element-details-template"> @@ -159,10 +159,10 @@ Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) </template> ``` -Voyons les caractéristiques de cet élément [`<template>`](/fr/docs/Web/HTML/Element/template) : +Voyons les caractéristiques de cet élément [`<template>`](/fr/docs/Web/HTML/Element/template) : - Ce [`<template>`](/fr/docs/Web/HTML/Element/template) contient un élément [`<style>`](/fr/docs/Web/HTML/Element/style) avec un ensemble de règles CSS dont la portée est celle du fragment de document créé par l'élément [`<template>`](/fr/docs/Web/HTML/Element/template). -- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) utilise un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) et l'attribut [`name`](/fr/docs/Web/HTML/Element/slot#attr-name) correspondant afin d'avoir trois [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : +- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) utilise un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) et l'attribut [`name`](/fr/docs/Web/HTML/Element/slot#attr-name) correspondant afin d'avoir trois [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : - `<slot name="element-name">` - `<slot name="description">` @@ -191,7 +191,7 @@ customElements.define('element-details', ### Utiliser l'élément element-details avec les emplacements nommés -Prenons maintenant un élément **`<element-details>`** et utilisons le dans notre document : +Prenons maintenant un élément **`<element-details>`** et utilisons le dans notre document : ```html <element-details> @@ -215,7 +215,7 @@ Prenons maintenant un élément **`<element-details>`** et utilisons le dans not </element-details> ``` -En voyant ce fragment, notons quelques points : +En voyant ce fragment, notons quelques points : - Ce fragment contient deux exemplaires **`<element-details>`** qui utilisent tous les deux l'attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) afin de référencer [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) `"element-name"` et `"description"` qui sont inscrits dans [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) `<element-details>`. - Seul le premier élément **`<element-details>`** fait référence à [l'emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) `"attributes"`. Le deuxième élément `<element-details>` n'y fait pas référence. @@ -223,7 +223,7 @@ En voyant ce fragment, notons quelques points : ### Mettre le tout en forme -Pour finir, ajoutons un peu de CSS pour les éléments [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt) et [`<dd>`](/fr/docs/Web/HTML/Element/dd) de notre document : +Pour finir, ajoutons un peu de CSS pour les éléments [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt) et [`<dd>`](/fr/docs/Web/HTML/Element/dd) de notre document : ```css dl { margin-left: 6px; } @@ -242,7 +242,7 @@ Assemblons l'ensemble des fragments pour voir le résultat final. {{ EmbedLiveSample('Un_exemple_plus_complexe', '300','400','element-details.png','') }} -Quelques notes à propos du résultat affiché : +Quelques notes à propos du résultat affiché : - Bien que les exemplaires des éléments **`<element-details>`** du document n'utilisent pas directement d'élément [`<details>`](/fr/docs/Web/HTML/Element/details), ils sont rendus comme celui-ci, car [`<details>`](/fr/docs/Web/HTML/Element/details) [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) les peuple avec ceci. - Au sein de l'élément [`<details>`](/fr/docs/Web/HTML/Element/details) affiché, le contenu des éléments **`<element-details>`** remplit [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, l'arbre du DOM pour les éléments **`<element-details>`** est composé avec le contenu [de la racine virtuelle](/fr/docs/Web/API/ShadowRoot). diff --git a/files/fr/web/xml/xml_introduction/index.md b/files/fr/web/xml/xml_introduction/index.md index 4fc1f9603c..91a66a066f 100644 --- a/files/fr/web/xml/xml_introduction/index.md +++ b/files/fr/web/xml/xml_introduction/index.md @@ -12,15 +12,15 @@ XML, pour _e**X**tensible **M**arkup **L**anguage_ (langage de balisage extensib De nombreux autres langages sont basés sur XML, comme par exemple [XHTML](fr/XHTML), [MathML](fr/MathML), [SVG](fr/SVG), [XUL](fr/XUL), [XBL](fr/XBL), [RSS](fr/RSS) et [RDF](fr/RDF). Vous pouvez créer votre propre langage basé sur XML. -### Du XML « correct » (valide et « bien formé ») +### Du XML « correct » (valide et « bien formé ») -Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. +Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. La plupart des navigateurs, dont Mozilla, offrent un outil de validation qui informera souvent lors de la lecture ou de l'affichage de documents mal formés. #### Exemple -Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, `<warning>`, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises \<br /> ou \<img /> en XHTML). +Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, `<warning>`, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises \<br /> ou \<img /> en XHTML). <code> <message> @@ -29,7 +29,7 @@ Voici un exemple de document mal formé : un des éléments possédant une bali </message> </code> -L'exemple qui suit est correct et « bien formé » : +L'exemple qui suit est correct et « bien formé » : <code> <message> @@ -43,7 +43,7 @@ Pour être valide, un document doit se conformer à des règles sémantiques qui ### Entités -Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : +Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : <table class="standard-table"> <tbody> @@ -55,12 +55,12 @@ Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) <tr> <td><code>&lt;</code></td> <td><code><</code></td> - <td>Un signe « plus petit que ».</td> + <td>Un signe « plus petit que ».</td> </tr> <tr> <td><code>&gt;</code></td> <td><code>></code></td> - <td>Un signe « plus grand que ».</td> + <td>Un signe « plus grand que ».</td> </tr> <tr> <td><code>&amp;</code></td> @@ -80,11 +80,11 @@ Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) </tbody> </table> -Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la [Document Type Definition](fr/DTD), comme décrit ci-dessous : +Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la [Document Type Definition](fr/DTD), comme décrit ci-dessous : <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE body [ - <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement… + <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement… Veuillez rafraîchir et réessayer."> ]> <body> @@ -107,11 +107,11 @@ L'autre technique utilise la puissance de [XSLT](fr/XSLT), qui est capable de tr ### Recommandations -Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. +Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. L'apprentissage du langage de balisage HTML vous aidera à mieux comprendre XML. Vous trouverez également plus d'informations en explorant le Mozilla Developer Center. -Voici une liste d'articles de référence sur le Web : +Voici une liste d'articles de référence sur le Web : - [W3Schools: DTD Tutorial (en)](http://www.w3schools.com/dtd/) - [W3Schools: XML Tutorial (en)](http://www.w3schools.com/xml/default.asp) @@ -124,5 +124,5 @@ L'article [Using XML (en)](http://www.alistapart.com/articles/usingxml/) est une ### Informations sur le document -- Auteur(s) : [Justin G. Shreve](http://justinshreve.com) -- Dernière mise à jour : le 4 août 2007 +- Auteur(s) : [Justin G. Shreve](http://justinshreve.com) +- Dernière mise à jour : le 4 août 2007 diff --git a/files/fr/web/xpath/functions/ceiling/index.md b/files/fr/web/xpath/functions/ceiling/index.md index 5810c1b60d..0ad19adc0f 100644 --- a/files/fr/web/xpath/functions/ceiling/index.md +++ b/files/fr/web/xpath/functions/ceiling/index.md @@ -23,7 +23,7 @@ La fonction `ceiling` évalue un nombre décimal et retourne le plus petit nombr Le plus petit entier supérieur ou égal à `nombre`. -Par exemple : +Par exemple : ceiling (5.2) = 6 diff --git a/files/fr/web/xpath/functions/current/index.md b/files/fr/web/xpath/functions/current/index.md index c90cae5ffb..bcc0f16033 100644 --- a/files/fr/web/xpath/functions/current/index.md +++ b/files/fr/web/xpath/functions/current/index.md @@ -22,7 +22,7 @@ Un ensemble de nœuds contenant uniquement le nœud courant. Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath core. -Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : +Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : <xsl:value-of select="current()"/> diff --git a/files/fr/web/xpath/functions/false/index.md b/files/fr/web/xpath/functions/false/index.md index 79e162444f..bb03fee03f 100644 --- a/files/fr/web/xpath/functions/false/index.md +++ b/files/fr/web/xpath/functions/false/index.md @@ -20,7 +20,7 @@ Booléen `false`. ### Notes -Cette fonction est utile dans les comparaisons : +Cette fonction est utile dans les comparaisons : <xsl:if test="boolean((1 > 2) = false())"> L'expression évaluée comme fausse diff --git a/files/fr/web/xpath/functions/lang/index.md b/files/fr/web/xpath/functions/lang/index.md index 30ac163d87..285347c2af 100644 --- a/files/fr/web/xpath/functions/lang/index.md +++ b/files/fr/web/xpath/functions/lang/index.md @@ -31,20 +31,20 @@ La fonction `lang` détermine si le nœud de contexte correspond à la langue in - Si la `chaîne` donnée ne spécifie pas de code de pays, cette fonction sélectionnera les nœuds dans la langue spécifiée, suivie éventuellement de n'importe quel code de pays. La réciproque n'est pas vraie. -Regardons le code XML suivant : +Regardons le code XML suivant : <p xml:lang="en">I went up a floor.</p> <p xml:lang="en-GB">I took the lift.</p> <p xsl:lang="en-US">I rode the elevator.</p> -et ce modèle XSL : +et ce modèle XSL : <xsl:value-of select="count(//p[lang('en')])" /> <xsl:value-of select="count(//p[lang('en-GB')])" /> <xsl:value-of select="count(//p[lang('en-US')])" /> <xsl:value-of select="count(//p[lang('de')])" /> -La sortie sera : +La sortie sera : 3 1 diff --git a/files/fr/web/xpath/functions/not/index.md b/files/fr/web/xpath/functions/not/index.md index 9caf626f21..045a9cbe3e 100644 --- a/files/fr/web/xpath/functions/not/index.md +++ b/files/fr/web/xpath/functions/not/index.md @@ -21,7 +21,7 @@ La fonction `not` évalue une expression booléenne et retourne la valeur oppos ### Retour -`True` pour une expression évaluée à `false` ; `false` pour une expression évaluée à `true`. +`True` pour une expression évaluée à `false` ; `false` pour une expression évaluée à `true`. ### Notes diff --git a/files/fr/web/xpath/functions/position/index.md b/files/fr/web/xpath/functions/position/index.md index 6576ca4ae8..e022521893 100644 --- a/files/fr/web/xpath/functions/position/index.md +++ b/files/fr/web/xpath/functions/position/index.md @@ -24,7 +24,7 @@ Un nombre entier égal à la position du contenu dans le contexte d'évaluation <!----> -- Le contexte est déterminé par le reste du chemin : +- Le contexte est déterminé par le reste du chemin : <!----> diff --git a/files/fr/web/xpath/functions/string/index.md b/files/fr/web/xpath/functions/string/index.md index bf566b4a3c..a46860bf53 100644 --- a/files/fr/web/xpath/functions/string/index.md +++ b/files/fr/web/xpath/functions/string/index.md @@ -26,7 +26,7 @@ Une chaîne. ### Notes - Si l'objet est un ensemble de nœuds, la valeur de la chaîne du premier nœud de l'ensemble est retournée. -- Un nombre est converti comme suit : +- Un nombre est converti comme suit : - NaN est converti en la chaîne `NaN`. - Zéro positif est converti en `0`. diff --git a/files/fr/web/xpath/functions/system-property/index.md b/files/fr/web/xpath/functions/system-property/index.md index e36f17ddb8..ad2b329cf2 100644 --- a/files/fr/web/xpath/functions/system-property/index.md +++ b/files/fr/web/xpath/functions/system-property/index.md @@ -25,9 +25,9 @@ Un objet représentant le propriété système donnée. ### Notes -- xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. +- xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. - xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT. -- xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. +- xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. ### Définition diff --git a/files/fr/web/xslt/element/if/index.md b/files/fr/web/xslt/element/if/index.md index d3f7e250e2..c4a24fd131 100644 --- a/files/fr/web/xslt/element/if/index.md +++ b/files/fr/web/xslt/element/if/index.md @@ -19,7 +19,7 @@ L'élément `<xsl:if>` regroupe un attribut test et un modèle. Si le test renvo ### Attribut obligatoire - `test` - - : Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour `boolean( )` si nécessaire) en une valeur booléenne. Si la valeur est `true`, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. + - : Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour `boolean( )` si nécessaire) en une valeur booléenne. Si la valeur est `true`, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. ### Attributs optionnels diff --git a/files/fr/web/xslt/element/index.md b/files/fr/web/xslt/element/index.md index 6b7c4fa2e2..bb28c58822 100644 --- a/files/fr/web/xslt/element/index.md +++ b/files/fr/web/xslt/element/index.md @@ -5,17 +5,17 @@ tags: - Référence_XSLT translation_of: Web/XSLT/Element --- -{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément `<hr>` dans feuille de style de conversion HTML. +{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément `<hr>` dans feuille de style de conversion HTML. -A ce propos, tous les attributs d'un LRE et certains attributs d'un nombre limité d'éléments XSLT peuvent inclure ce que l'on appelle un modèle de valeur d'attribut. Un modèle de valeur d'attribut est simplement une chaîne qui intègre une expression XPath utilisée pour spécifier la valeur de l'attribut. Lors de l'exécution, l'expression est évaluée et le résultat de cette évaluation est substitué à l'expression XPath. Par exemple, considérons que variable « \<tt>image-dir\</tt> » est définie comme ci-dessous : +A ce propos, tous les attributs d'un LRE et certains attributs d'un nombre limité d'éléments XSLT peuvent inclure ce que l'on appelle un modèle de valeur d'attribut. Un modèle de valeur d'attribut est simplement une chaîne qui intègre une expression XPath utilisée pour spécifier la valeur de l'attribut. Lors de l'exécution, l'expression est évaluée et le résultat de cette évaluation est substitué à l'expression XPath. Par exemple, considérons que variable « \<tt>image-dir\</tt> » est définie comme ci-dessous : <xsl:variable name="image-dir">/images</xsl:variable> -L'expression a évaluer est placée entre accolades : +L'expression a évaluer est placée entre accolades : <img src="{$image-dir}/mygraphic.jpg"/> -Ce qui donnera : +Ce qui donnera : <img src="/images/mygraphic.jpg"/> diff --git a/files/fr/web/xslt/element/message/index.md b/files/fr/web/xslt/element/message/index.md index 6f3609f1c0..13640a9989 100644 --- a/files/fr/web/xslt/element/message/index.md +++ b/files/fr/web/xslt/element/message/index.md @@ -23,7 +23,7 @@ Aucun. ### Attributs optionnels - `terminate` - - : Défini à `yes`, il indique que l'exécution doit être interrompue. La valeur par défaut est `no` : dans ce cas, le message est envoyé et l'exécution se poursuit. + - : Défini à `yes`, il indique que l'exécution doit être interrompue. La valeur par défaut est `no` : dans ce cas, le message est envoyé et l'exécution se poursuit. ### Type diff --git a/files/fr/web/xslt/element/number/index.md b/files/fr/web/xslt/element/number/index.md index 3d01ed9e73..0361a57be7 100644 --- a/files/fr/web/xslt/element/number/index.md +++ b/files/fr/web/xslt/element/number/index.md @@ -36,8 +36,8 @@ Aucun. - `level` - : Définit la manière dont les niveaux de l'arbre source doivent pris en compte lors de la génération des - nombres séquentiels. Les trois valeurs possibles sont : `single`, `multiple` et - `any`. La valeur par défaut est `single` : + nombres séquentiels. Les trois valeurs possibles sont : `single`, `multiple` et + `any`. La valeur par défaut est `single` : - `single` - : Numérote de façon séquentielle les nœuds descendants d'un même parent, à la manière des éléments d'une @@ -71,7 +71,7 @@ Aucun. un des formats standards de `<xsl:number>`. - format - - : Définit le format du nombre généré : + - : Définit le format du nombre généré : - format="1" - : \<tt>1 2 3 …\</tt> (C'est le seul format supporté à ce jour) diff --git a/files/fr/web/xslt/element/sort/index.md b/files/fr/web/xslt/element/sort/index.md index 56a10f4fdd..93a75fd3c3 100644 --- a/files/fr/web/xslt/element/sort/index.md +++ b/files/fr/web/xslt/element/sort/index.md @@ -46,7 +46,7 @@ Aucun. <!----> - `data-type` - - : Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont `text` et `number` ; `text` est la valeur par défaut. + - : Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont `text` et `number` ; `text` est la valeur par défaut. ### Type diff --git a/files/fr/web/xslt/element/text/index.md b/files/fr/web/xslt/element/text/index.md index 23beb50151..bcd2b606e6 100644 --- a/files/fr/web/xslt/element/text/index.md +++ b/files/fr/web/xslt/element/text/index.md @@ -22,7 +22,7 @@ Aucun. ### Attribut optionnel -- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple ` ` pour ` `). +- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple ` ` pour ` `). - : Définit si les caractères spéciaux sont échappés lors de l'écriture vers la sortie. Les valeurs autorisées sont `yes` ou `no`. Si il est définit à `yes`, par exemple, le caractère \<tt>>\</tt> est envoyé tel quel ( `>` )et non comme `>`. ### Type diff --git a/files/fr/web/xslt/element/value-of/index.md b/files/fr/web/xslt/element/value-of/index.md index f9742074c4..e0086dd187 100644 --- a/files/fr/web/xslt/element/value-of/index.md +++ b/files/fr/web/xslt/element/value-of/index.md @@ -21,7 +21,7 @@ L'élément `<xsl:value-of>` évalue une expression XPath, la convertit en chaî ### Attributs optionnels -- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple ` ` pour ` `). +- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple ` ` pour ` `). - : Définit si les caractères spéciaux sont échappés quand ils sont écrits sur la sortie. Les valeurs autorisées sont `yes` ou `no`. Par exemple, s'il est définit à `yes`, le caractère \<tt>>\</tt> est transmis brut ( `>` ). Dans le cas contraire, c'est `>` qui serait envoyée à la sortie. ### Type diff --git a/files/fr/web/xslt/element/when/index.md b/files/fr/web/xslt/element/when/index.md index e6f51bbc3a..04ce9e3c59 100644 --- a/files/fr/web/xslt/element/when/index.md +++ b/files/fr/web/xslt/element/when/index.md @@ -19,7 +19,7 @@ L'élément `<xsl:when>` apparaît toujours dans un élément `<xsl:choose>`, et ### Attribut obligatoire - `test` - - : Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. + - : Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. ### Attributs obligatoires diff --git a/files/fr/web/xslt/pi_parameters/index.md b/files/fr/web/xslt/pi_parameters/index.md index 67f387db2f..8a6968f908 100644 --- a/files/fr/web/xslt/pi_parameters/index.md +++ b/files/fr/web/xslt/pi_parameters/index.md @@ -10,9 +10,9 @@ original_slug: Web/XSLT/Paramètres_des_instructions_de_traitement XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'[XSLTProcessor](fr/XSLTProcessor) sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (_PI_, pour Processing Instruction) `<?xml-stylesheet?>`. -Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans [Firefox 2](fr/Firefox_2) (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), `<?xslt-param?>` et `<?xslt-param-namespace?>`. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) `xml-stylesheet`. +Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans [Firefox 2](fr/Firefox_2) (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), `<?xslt-param?>` et `<?xslt-param-namespace?>`. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) `xml-stylesheet`. -L'exemple suivant passe les deux paramètres `color` et `size` à la feuille de style style.xsl : +L'exemple suivant passe les deux paramètres `color` et `size` à la feuille de style style.xsl : <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> @@ -30,7 +30,7 @@ S'il existe plusieurs PI `xml-stylesheet` les paramètres s'appliquent à toutes #### xslt-param -La PI `xslt-param` accepte quatre attributs : +La PI `xslt-param` accepte quatre attributs : - name - : La partie locale du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut. Cependant, si ce n'est pas un [NCName](http://www.w3.org/TR/REC-xml-names/#NT-NCName) valide, il ne correspondra à aucun paramètre de la feuille de style. @@ -53,19 +53,19 @@ Notez que `value="..."` n'est pas strictement égal à `select="'...'"` car valu ##### Exemples -Le paramètre `color` contient la chaîne `red` : +Le paramètre `color` contient la chaîne `red` : <?xslt-param name="color" value="red"?> -Le paramètre `columns` contient `2` : +Le paramètre `columns` contient `2` : <?xslt-param name="columns" select="2"?> -Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `null` : +Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `null` : <?xslt-param name="books" select="//book"?> -Le paramètre `show-toc<code> contient le booléen <code>true` : +Le paramètre `show-toc<code> contient le booléen <code>true` : <?xslt-param name="show-toc" select="true()"?> @@ -84,7 +84,7 @@ Si l'attribut **select** ne peut pas être analysé ou exécuté, la PI est igno #### xslt-param-namespace -`xslt-param-namespace` accepte deux attributs : +`xslt-param-namespace` accepte deux attributs : - prefix - : Le préfixe mappé. @@ -101,7 +101,7 @@ Si **namespace** est absent, la PI est ignorée. Si **namespace** est vide, le m ##### Exemples -Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `http://www.example.org/myNamespace` : +Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `http://www.example.org/myNamespace` : <?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?> <?xslt-param name="books" select="//my:book"?> @@ -112,6 +112,6 @@ Supportées depuis Firefox 2.0.0.1. Dans la version 2, l'attribut **value** est ### Possibilités de développements futurs -Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? `document()` semble utile, mais il semble difficile de conserver le fait que `generate-id()` devrait produire la même chaîne pour un même document. +Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? `document()` semble utile, mais il semble difficile de conserver le fait que `generate-id()` devrait produire la même chaîne pour un même document. Interwiki Language Links diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md index d7f67a3742..e33eafd76f 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md @@ -17,7 +17,7 @@ L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une - Une feuille de styles XSLT est identifiée comme telle par un en-tête XSLT standard. - : L'élément externe dans une feuille de styles XSLT doit être l'élément \<xsl:stylesheet> (ou éventuellement l'élément `<xsl:transform>`). Cet élément inclut au moins une déclaration d'espace de nommage (`namespace`) et l'attribut de version obligatoire. On peut également inclure d'autres espaces de nommage et trois attributs optionnels. - L'espace de nommage imposé pour XSLT est "http\://www\.w3.org/1999/XSL/Transform". - - : Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http\://www\.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http\://www\.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape. Comme saisir la chaîne "http\://www\.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait : + - : Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http\://www\.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http\://www\.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape. Comme saisir la chaîne "http\://www\.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait : <!----> @@ -25,15 +25,15 @@ L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une - Le pseudo attribut xmlns définit xsl comme l'abréviation du nom complet de l'espace de nommage pour ce document. Ainsi l'élément stylesheet ci-dessus est préfixé par `xsl:`. Bien que xsl soit conventionnellement utilisé, il n'est pas imposé et il est possible de choisir un autre raccourci. Les exemples de ce document utilisent tous le préfixe xsl. - Toutes les transformations XSLT sont exécutées sur les arbres, et non sur les documents. -- Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur. Netscape utilise une structure d'arbre proche de celle du [DOM](fr/DOM) du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations. L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœud*root* (unique), des nœuds*élément*, des nœuds*text*, des nœuds*attribut*, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage. En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant. Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur. +- Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur. Netscape utilise une structure d'arbre proche de celle du [DOM](fr/DOM) du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations. L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœud*root* (unique), des nœuds*élément*, des nœuds*text*, des nœuds*attribut*, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage. En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant. Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur. - XSLT est un langage déclaratif de haut niveau. - Une feuille de styles XSLT est un ensemble de règles, appelées*modèles* (templates en anglais), qui déclare chacune qu'un nœud correspondant à ce motif spécifique doit être traité de cette façon spécifique et se retrouver à cette position spécifique dans l'arbre résultat. Les détails de l'exécution sont laissés au processeur, et comme l'ordre d'exécution des règles de la feuille de styles ne peut donc être garanti, XSLT ne supporte aucune fonctionnalité pouvant provoquer un effet de bord. En cela, il se comporte comme*Lisp* ou*Scheme*. - Les emplacements dans les arbres sont spécifiés à l'aide de XPath, une recommandation du W3C. -- Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la section*référence*. +- Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la section*référence*. - Les conflits éventuels dans la correspondance avec les modèles sont résolus par l'utilisation d'un ensemble de règles de priorité en cascade. - En général, une règle modèle plus spécifique a la priorité sur une d'ordre plus général, et toutes choses égales par ailleurs, une règle apparaissant tard dans la feuille de style a la priorité sur celles qui se trouvent avant elle. - Les feuilles de styles peuvent être attachées à un document XML par l'intermédiaire d'une instruction de traitement. -- La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à : +- La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à : <!----> diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md index f619d879e6..00e6c93825 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md @@ -16,9 +16,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **XSLT: Programmer's Reference, Second Edition** - - **Auteur** : Michael H. Kay - - **Nombre de page** : 992 pages - - **Éditeur** : Wrox; 2 edition (May 3, 2001) + - **Auteur** : Michael H. Kay + - **Nombre de page** : 992 pages + - **Éditeur** : Wrox; 2 edition (May 3, 2001) - **ISBN**: 0764543814 - Michael Kay est membre du groupe de travail XSL du W3C et le développeur de son propre processeur XSLT libre, Saxon. Il est également l'auteur du seul livre sur ce sujet à avoir bénéficié d'une seconde édition. C'est un @@ -28,9 +28,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **XSLT** - - **Auteur** : Doug Tidwell - - **Nombre de page** : 473 pages - - **Éditeur** : O'Reilly Media; 1 edition (August 15, 2001) + - **Auteur** : Doug Tidwell + - **Nombre de page** : 473 pages + - **Éditeur** : O'Reilly Media; 1 edition (August 15, 2001) - **ISBN**: 0596000537 - Doug Tidwell est un développeur senior chez IBM et un*évangéliste* reconnu des technologies XML en général. Il est l'auteur de plusieurs articles et tutoriels concernant divers aspects de XML sur l'exhaustif @@ -40,9 +40,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **Learning XML, Second Edition** - - **Auteur** : Erik T. Ray - - **Nombre de page** : 432 pages - - **Éditeur** : O'Reilly Media; 2 edition (September 22, 2003) + - **Auteur** : Erik T. Ray + - **Nombre de page** : 432 pages + - **Éditeur** : O'Reilly Media; 2 edition (September 22, 2003) - **ISBN**: 0596004206 - Comme l'indique le titre, il s'agit d'un aperçu général de XML. Le chapitre 6 est dédié spécifiquement à XSLT. - <http://www.amazon.com/gp/product/0596004206> @@ -53,11 +53,11 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **World Wide Web Consortium** - - **Page d'accueil du W3C** : <http://www.w3.org/> - - **Page de XSL** : <http://www.w3.org/Style/XSL/> - - **Recommandation XSLT 1.0** : <http://www.w3.org/TR/xslt> - - **Archive of public style (CSS and XSLT) discussions** : <http://lists.w3.org/Archives/Public/www-style/> - - **Recommandation XPath 1.0** : <http://www.w3.org/TR/xpath> + - **Page d'accueil du W3C** : <http://www.w3.org/> + - **Page de XSL** : <http://www.w3.org/Style/XSL/> + - **Recommandation XSLT 1.0** : <http://www.w3.org/TR/xslt> + - **Archive of public style (CSS and XSLT) discussions** : <http://lists.w3.org/Archives/Public/www-style/> + - **Recommandation XPath 1.0** : <http://www.w3.org/TR/xpath> - Le World Wide Web Consortium est l'organisme qui publie des recommandations sur un certain nombre de technologies Web, dont beaucoup deviennent de-facto des standards. #### Articles diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/index.md index 31319589cc..907e04a459 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/index.md @@ -16,7 +16,7 @@ Mais au bout du compte, la plus grande partie du contenu des documents XML devra Actuellement, Gecko (le moteur de rendu de Mozilla et Firefox) supporte deux formats de feuilles de styles XML. Pour le contrôle basique de l'apparence -- fontes, couleurs, position, etc. -- Gecko utilise [CSS](fr/CSS), tiré du [DHTML](fr/DHTML). Toutes les spécifications CSS1 et la majorité des CSS2 sont supportées, le support du tout récent CSS3 est en développement. Pour plus d'information à propos de CSS, consultez le site [Eric Meyer's CSS pages](http://www.meyerweb.com/eric/css/). -Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie _eXtensible Stylesheet Language/Transform_. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). +Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie _eXtensible Stylesheet Language/Transform_. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). ### Référence XSLT/XPath diff --git a/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md index 75a50d2048..290e9ff444 100644 --- a/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md +++ b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md @@ -11,7 +11,7 @@ Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT (Tr ### Création de XSLTProcessor -Pour commencer, nous avons besoin de créer un objet [XSLTProcessor](fr/XSLTProcessor) : +Pour commencer, nous avons besoin de créer un objet [XSLTProcessor](fr/XSLTProcessor) : var processor = new XSLTProcessor(); @@ -37,7 +37,7 @@ Nous pouvons utiliser les méthodes [`transformToDocument()`](#transformToDocume #### transformToDocument -`transformToDocument()` prend un argument, le nœud source à transformer, et retourne un nouveau `Document` DOM avec les résultats de la transformation : +`transformToDocument()` prend un argument, le nœud source à transformer, et retourne un nouveau `Document` DOM avec les résultats de la transformation : var newDocument = processor.transformToDocument(domToBeTransformed); @@ -47,7 +47,7 @@ L'objet résultant est un `HTMLDocument` si la [méthode de sortie](http://www.w Nous pouvons également utiliser `transformToFragment()` qui retournera un nœud `DocumentFragment` DOM. C'est très efficace car l'adjonction d'un fragment à un autre nœud adjoint de façon transparente tous les descendants de ce fragment, et le fragment lui-même n'est pas fusionné. Les fragment sont donc utiles pour déplacer les nœuds et les stocker sans les éléments inutiles d'un objet document entier. -`transformToFragment` prend deux arguments : le document source à transformer (comme ci-dessus) et un objet `Document` qui possèdera le fragment (tous les fragments doivent être possédés par un document). +`transformToFragment` prend deux arguments : le document source à transformer (comme ci-dessus) et un objet `Document` qui possèdera le fragment (tous les fragments doivent être possédés par un document). var ownerDocument = document.implementation.createDocument("", "test", null); var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md index 72c3c1d793..04a2b5512a 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md @@ -14,9 +14,9 @@ La fichier XSLT a un paramètre appelé `myOrder` que le JavaScript définit pou Une fois la transformation complétée, le résultat est ajouté au document, comme indiqué dans l'exemple. -**Figure 7 : Tri selon le contenu des divvoir l'exemple** +**Figure 7 : Tri selon le contenu des divvoir l'exemple** -_Fragment XHTML :_ +_Fragment XHTML :_ <div id="example"> <div>1</div> @@ -82,7 +82,7 @@ _JavaScript_ document.getElementById("example").appendChild(fragment) } -_Feuille de style XSL :_ +_Feuille de style XSL :_ <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md index f1519ecde1..a97fc5010b 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md @@ -10,7 +10,7 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_basique L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les mêmes fichiers que dans l'exemple [Génération de HTML](fr/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML) de l'article [XSLT dans Gecko](fr/XSLT_dans_Gecko). Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage. -**Figure 4 : fichier XML** +**Figure 4 : fichier XML** Document XML (example1.xml): @@ -28,7 +28,7 @@ Document XML (example1.xml): </myNS:Body> </myNS:Article> -**Figure 5 : feuille de style XSLT** +**Figure 5 : feuille de style XSLT** feuille de style XSL (example1.xsl): @@ -60,7 +60,7 @@ feuille de style XSL (example1.xsl): <xsl:value-of select="/myNS:Article/myNS:Title"/> </span> <br /> - Auteurs : <br /> + Auteurs : <br /> <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> </p> @@ -77,7 +77,7 @@ feuille de style XSL (example1.xsl): -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> + :: <strong> <xsl:value-of select="@company" /> </strong> </xsl:if> <br /> @@ -98,7 +98,7 @@ feuille de style XSL (example1.xsl): L'exemple charge en mémoire les deux fichiers .xsl (`xslStylesheet`) et .xml (`xmlDoc`) à l'aide de `XMLHTTPRequest` synchrone. Le fichier .xsl est alors importé (`xsltProcessor.importStylesheet(xslStylesheet)`) et la transformation exécutée (`xsltProcessor.transformToFragment(xmlDoc, document)`). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir. -**Figure 6 : Exemple voir l'exemple** +**Figure 6 : Exemple voir l'exemple** var xslStylesheet; var xsltProcessor = new XSLTProcessor(); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md index 6ba6e8e47a..1f17d449f3 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md @@ -10,7 +10,7 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Les_liaisons_JavaScript_XSL JavaScript peut exécuter des transformations XSLT à travers l'objet `XSLTProcessor`. Un fois instancié, un `XSLTProcessor` a une méthode `importStylesheet` qui prend comme argument la feuille de style XSLT à utiliser pour la transformation. La feuille de style doit être passée comme un document XML, ce qui signifie que le fichier .xsl doit être chargé par la page avant d'appeler `importStylesheet`. Cela peut être fait par `XMLHttpRequest` ou par `XMLDocument.load`. -**Figure 1 : Instanciation d'un XSLTProcessor** +**Figure 1 : Instanciation d'un XSLTProcessor** var xsltProcessor = new XSLTProcessor(); @@ -25,9 +25,9 @@ JavaScript peut exécuter des transformations XSLT à travers l'objet `XSLTProce // Importation du .xsl xsltProcessor.importStylesheet(xslRef); -Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID `example`, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode `importNode` du document XML en mémoire. `importNode` permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à `true`, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de `appendChild`, comme indiqué sur la figure 2. +Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID `example`, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode `importNode` du document XML en mémoire. `importNode` permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à `true`, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de `appendChild`, comme indiqué sur la figure 2. -**Figure 2 : Création d'un document XML à partir d'un DOM document** +**Figure 2 : Création d'un document XML à partir d'un DOM document** // création d'u nouveau document XML en mémoire var xmlRef = document.implementation.createDocument("", "", null); @@ -43,13 +43,13 @@ Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui es Une fois la feuille de style importée, `XSLTProcessor` doit exécuter deux méthodes pour la transformations réelle, à savoir `transformToDocument()` et `transformToFragment()`. `transformToDocument()` retourne un document XML entier alors que `transformToFragment()` retourne un fragment de document qui peut être facilement ajouté à un document XML existant. Les deux prennent le document XML comme premier paramètre à transformer. `transformToFragment()` requiert un second paramètre, à savoir l'objet document qui possédera le fragment généré. Si le fragment généré est inséré dans le document HTML courant, passer document est suffisant. -**Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'** +**Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'** Alors que nous pouvons utiliser la méthode `loadXML` d'Internet Explorer pour charger une chaîne contenant du XML, nous devons faire quelques arrangements pour faire la même chose dans Mozilla. Nous devons utiliser le DomParser.no pour créer un document, car c'est géré par le*DomParser* . var parser = new DOMParser(); var doc = parser.parseFromString(aStr, "text/xml"); -**Figure 3 : Exécution de la transformation** +**Figure 3 : Exécution de la transformation** var fragment = xsltProcessor.transformToFragment(xmlRef, document); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md index d7f841f350..920540f401 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md @@ -10,15 +10,15 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres Alors que l'exécution de transformations à l'aide des fichiers .xsl et .xml pré codés est utile, la configuration du fichier .xsl par JavaScript peut l'être bien plus. Par exemple, JavaScript et XSLT peuvent être utilisés pour trier des données XML puis les afficher. L'ordre du tri pourra alterner entre le tri ascendant et le tri descendant. -XSLT fournit l'élément `xsl:param`, qui est un descendant de l'élément `xsl:stylesheet`. `XSLTProcessor()` fournit trois méthodes JavaScript pour interagir avec ces paramètres : `setParameter`, `getParameter` et `removeParameter`. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de `xsl:param` (normalement, `param` tombera dans l'espace de nommage par défaut, ainsi le passer à `null` suffira). Le nom local de `xsl:param` est le second argument. `setParameter` requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini. +XSLT fournit l'élément `xsl:param`, qui est un descendant de l'élément `xsl:stylesheet`. `XSLTProcessor()` fournit trois méthodes JavaScript pour interagir avec ces paramètres : `setParameter`, `getParameter` et `removeParameter`. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de `xsl:param` (normalement, `param` tombera dans l'espace de nommage par défaut, ainsi le passer à `null` suffira). Le nom local de `xsl:param` est le second argument. `setParameter` requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini. -**Figure 7 : Paramètres** +**Figure 7 : Paramètres** -_XSLT :_ +_XSLT :_ <xsl:param name="myOrder" /> -_JavaScript :_ +_JavaScript :_ var sortVal = xsltProcessor.getParameter(null, "monOrdre"); |
