From 110a7a1592789759f0f427f40856899ea2c3cfd7 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 14 Jul 2021 10:39:25 +0200 Subject: fixes fr #1440 (#1448) * fixes #1440 for fr * UPDT: Update Backgrounds_and_borders * UPDT: Update The_web_and_web_standards * UPDT: Update First_steps/Arrays * UPDT: Update First_steps/Math * UPDT: Update Silly_story_generator * UPDT: Update Django/development_environment * UPDT: Update Client-side_JavaScript_frameworks * UPDT: Update Command_line * UPDT: Update API/tabs * RMV: Removing tags * UPDT: Cleanup html of Add-ons/WebExtensions * UPDT: Fix flaws on WebExtensions/Native_messaging * FIX: Fix flaws on Accessibility_inspector/Simulation * UPDT: Html cleanup on Color_contrast * UPDT: Mega html cleanup for Document_Object_Model/Introduction * FIX: Fix flaws for API/Element * UPDT: Update BCD * FIX: Wrong link lang * UPDT: Fix flaws/links * FIX: Img flaws and link lang * FIX: links error and html * UPDT: Links and cleanup html * FIX: link lang * FIX: link lang * FIX: broken example * FIX: fix broken example and html Co-authored-by: tristantheb --- .../backgrounds_and_borders/index.html | 175 ++++---- .../the_web_and_web_standards/index.html | 115 +++-- .../learn/javascript/first_steps/arrays/index.html | 55 ++- .../learn/javascript/first_steps/math/index.html | 85 ++-- .../first_steps/silly_story_generator/index.html | 26 +- .../django/development_environment/index.html | 170 ++++--- .../client-side_javascript_frameworks/index.html | 106 ++--- .../command_line/index.html | 178 ++++---- .../browsersettings/zoomsitespecific/index.html | 2 +- .../add-ons/webextensions/api/tabs/index.html | 86 ++-- .../webextensions/api/userscripts/index.html | 6 +- .../api/userscripts/register/index.html | 14 +- files/fr/mozilla/add-ons/webextensions/index.html | 17 +- .../webextensions/native_messaging/index.html | 140 +++--- .../add-ons/webextensions/what_next_/index.html | 4 +- files/fr/mozilla/firefox/releases/77/index.html | 2 +- .../web/api/navigatoronline/online/index.html | 4 +- .../accessibility_inspector/simulation/index.html | 20 +- .../perceivable/color_contrast/index.html | 34 +- files/fr/web/api/console_api/index.html | 8 +- .../document_object_model/introduction/index.html | 249 ++++------- files/fr/web/api/element/index.html | 490 +++++++++------------ files/fr/web/api/eventtarget/index.html | 48 +- files/fr/web/api/formdata/has/index.html | 6 +- files/fr/web/api/formdata/keys/index.html | 6 +- files/fr/web/api/notification/actions/index.html | 2 +- files/fr/web/api/notification/body/index.html | 2 +- files/fr/web/api/notification/close/index.html | 2 +- files/fr/web/api/notification/data/index.html | 2 +- files/fr/web/api/notification/dir/index.html | 2 +- files/fr/web/api/notification/icon/index.html | 2 +- files/fr/web/api/notification/image/index.html | 2 +- files/fr/web/api/notification/index.html | 6 +- files/fr/web/api/notification/lang/index.html | 2 +- .../fr/web/api/notification/maxactions/index.html | 2 +- .../web/api/notification/notification/index.html | 72 ++- files/fr/web/api/notification/onclose/index.html | 2 +- files/fr/web/api/notification/onerror/index.html | 2 +- files/fr/web/api/notification/onshow/index.html | 2 +- files/fr/web/api/notification/renotify/index.html | 2 +- .../api/notification/requestpermission/index.html | 4 +- .../api/notification/requireinteraction/index.html | 2 +- files/fr/web/api/notification/silent/index.html | 2 +- files/fr/web/api/notification/tag/index.html | 2 +- files/fr/web/api/notification/timestamp/index.html | 2 +- files/fr/web/api/notification/title/index.html | 2 +- files/fr/web/api/notification/vibrate/index.html | 4 +- files/fr/web/api/notifications_api/index.html | 8 +- .../shownotification/index.html | 12 +- .../http/cors/errors/corsrequestnothttp/index.html | 10 +- files/fr/web/http/headers/cache-control/index.html | 12 +- .../web/http/headers/content-language/index.html | 4 +- .../frame-ancestors/index.html | 8 +- .../headers/content-security-policy/index.html | 4 +- files/fr/web/http/headers/index.html | 2 +- files/fr/web/http/methods/trace/index.html | 2 +- .../classes/private_class_fields/index.html | 2 +- .../classes/public_class_fields/index.html | 2 +- files/fr/web/svg/element/ellipse/index.html | 2 +- files/fr/web/svg/element/pattern/index.html | 122 +++-- files/fr/web/svg/element/polygon/index.html | 60 +-- files/fr/web/web_components/index.html | 2 +- 62 files changed, 1086 insertions(+), 1334 deletions(-) (limited to 'files/fr') diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html index 2fedb26439..27b6617080 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -12,7 +12,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders Prérequis: - Compétences informatique basiques , logicels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. ) + Compétences informatique basiques , logicels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. ) Objectif: @@ -21,25 +21,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders -

Mettre en forme l'arrière-plan avec CSS

+

Mettre en forme l'arrière-plan avec CSS

-

La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

+

La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

-
.box {
+
.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
-} 
-

+}
-

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

+

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

Couleur de fond

-

La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

+

La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

-

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.

+

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.

-

Expérimentez avec ce code, en faisant varier les valeurs  <color> dans les différentes déclarations.

+

Expérimentez avec ce code, en faisant varier les valeurs <color> dans les différentes déclarations.

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

@@ -47,15 +46,15 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders

La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.

-

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

+

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

-

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

+

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

-

Contrôler le background-repeat

+

Contrôler le background-repeat

-

La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

+

La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

-

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y  et observez.

+

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y et observez.

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

Dimensionner l'image de fond

-

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

+

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

On peut aussi utiliser les mots-clé :

  • cover — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.
    • -
  • contain — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.
    • +
  • contain — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.
-

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

+

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

Essayez ce qui suit :

  • Changez les dimensions de l'arrière-plan.
    • -
  • Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par background-size: cover ou background-size: contain.
    • -
  • Si votre image est plus petite que la boîte, vous pouvez changer la valeur de background-repeat pour répéter l'image.
    • +
  • Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par background-size: cover ou background-size: contain.
    • +
  • Si votre image est plus petite que la boîte, vous pouvez changer la valeur de background-repeat pour répéter l'image.

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

-

Positionner l'image de fond

+

Positionner l'image de fond

-

La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

+

La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

-

Note : La valeur par défaut de  background-position est (0,0).

+

Note : La valeur par défaut de background-position est (0,0).

-

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

+

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

-

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):

+

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):

-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
-} 
-

+}
-

Et Longueurs, ou pourcentages :

+

Et Longueurs, ou pourcentages :

-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
-} 
-

+}
-

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

+

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
 }

 
-
La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : 

+
La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :

 
-
.box {
+
.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
-} 

+}

 
-
Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

+
Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

 
 
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

 
-

-
Note : background-position est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.

+

+
Note : background-position est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.

 

 
 
Arrière-plan dégradé

 
-
Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.

+
Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.

 
-
Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

+
Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

 
 
Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

 
 
{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

 
-
 Images de fond multiples

+
Images de fond multiples

 
-
Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image , chacune séparé par une virgule.

+
Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image, chacune séparé par une virgule.

 
 
Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.

 
-

-
Note : on peut joyeusement mélanger gradients et images de fond classiques.

+

+
Note : on peut joyeusement mélanger gradients et images de fond classiques.

 

 
-
Les autres propriété background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que  background-image:

+
Les autres propriété background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que background-image:

 
 
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
@@ -185,9 +182,9 @@ background-position: 10px 20px,  top right;

  
  • local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.
    • 
 
 
-
    The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).
    
+
    The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).
    
 
-
    Utiliser la propriété raccourci background 
    
+
    Utiliser la propriété raccourci background
    
 
 
    As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.
    
 
@@ -208,7 +205,7 @@ background-position: 10px 20px,  top right;

    Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

    -

    Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

    +

    Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

    Bordures

    @@ -216,34 +213,34 @@ background-position: 10px 20px, top right;

    We can set a border for all four sides of a box with {{cssxref("border")}}:

    -
    .box {
+
    *.box {
   border: 1px solid black;
-} 
    
+}*

    Or we can target one edge of the box, for example:

    -
    .box {
+
    .box {
   border-top: 1px solid black;
-} 
    
+}

    The individual properties for these shorthands would be:

    -
    .box {
+
    .box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
-} 
    
+}

    And for the longhands:

    -
    .box {
+
    .box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
-} 
    
+}
    -
    -

    Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

    +
    +

    Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

    There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

    @@ -252,19 +249,19 @@ background-position: 10px 20px, top right;

    Coins arrondis

    -

    On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

    +

    On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

    -

    Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :

    +

    Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :

    -
    .box {
+
    .box {
   border-radius: 10px;
-} 
    
+}

    Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

    -
    .box {
+
    .box {
   border-top-right-radius: 1em 10%;
-} 
    
+}

    Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.

    @@ -272,23 +269,23 @@ background-position: 10px 20px, top right;

    Jouer avec les arrière-plans et les bordures

    -

    Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :

    +

    Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :

      -
    1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
      2. -
    2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
      3. -
    3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
      4. +
    4. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
      5. +
    5. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
      6. +
    6. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.

    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}

    -
    -

    Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

    +
    +

    Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

    Résumé

    -

    Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

    +

    Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

    Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

    @@ -297,23 +294,23 @@ background-position: 10px 20px, top right;

    Dans ce cours

      -
    1. Cascade and inheritance
      2. -
    2. CSS selectors +
    3. Cascade and inheritance
      4. +
    4. CSS selectors
      5. -
    5. The box model
      6. -
    6. Backgrounds and borders
      7. -
    7. Handling different text directions
      8. -
    8. Overflowing content
      9. -
    9. Values and units
      10. -
    10. Sizing items in CSS
      11. -
    11. Images, media, and form elements
      12. -
    12. Styling tables
      13. -
    13. Debugging CSS
      14. -
    14. Organizing your CSS
      15. +
    15. The box model
      16. +
    16. Backgrounds and borders
      17. +
    17. Handling different text directions
      18. +
    18. Overflowing content
      19. +
    19. Values and units
      20. +
    20. Sizing items in CSS
      21. +
    21. Images, media, and form elements
      22. +
    22. Styling tables
      23. +
    23. Debugging CSS
      24. +
    24. Organizing your CSS
    diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index dba86cd1c1..e37f991a39 100644 --- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -2,78 +2,77 @@ title: Le web et ses normes slug: Learn/Getting_started_with_the_web/The_web_and_web_standards tags: - - Apprendre - - Débutant + - Beginner - Front-end - - Normes Web - - Standards Web + - Learn - Web + - Web Standards translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards --- -

    {{learnsidebar}}

    +

    {{learnsidebar}}

    -

    Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

    +

    Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

    -

    Une brève histoire du web

    +

    Une brève histoire du web

    -

    Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

    +

    Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

    -

    À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

    +

    À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

    -

    En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

    +

    En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

    -

    Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

    +

    Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

    -

    À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

    +

    À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

    -

    Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

    +

    Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

    -

    Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

    +

    Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

    -

    Les standards du Web

    +

    Les standards du Web

    -

    Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

    +

    Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

    -

    Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

    +

    Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

    -

    Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

    +

    Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

    -

    Normes "ouvertes"

    +

    Normes "ouvertes"

    -

    L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

    +

    L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

    -

    Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

    +

    Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

    -

    Cela permet au Web de rester une ressource publique librement accessible.

    +

    Cela permet au Web de rester une ressource publique librement accessible.

    -

    Ne cassez pas le web

    +

    Ne cassez pas le web

    -

    Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

    +

    Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

    Être développeur web, c'est bien

    L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

    -

    Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

    +

    Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

    La seule constante est la variation.

    -

    Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

    +

    Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

    Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

    Vue d'ensemble des outils Web modernes

    -

    Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

    +

    Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

    -

    Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

    +

    Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

    HTTP

    -

    Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

    +

    Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

    "Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
 
@@ -81,17 +80,17 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
 
 [Télécharge les fichiers et affiche la page]
    -

    La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

    +

    La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

    HTML, CSS et JavaScript

    -

    HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

    +

    HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

    • -

      Hypertext Markup Language, ou HTML, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :

      +

      Hypertext Markup Language, ou HTML, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :

      - 
      <h1>Ceci est un titre de haut niveau</h1>
+  
      <h1>Ceci est un titre de haut niveau</h1>
 
 <p>Voilà un paragraphe de texte</p>
 
@@ -100,18 +99,18 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
   
      Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.
    • -

      Les Feuilles de Style en cascade (CSS - Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:

      +

      Les Feuilles de Style en cascade (CSS - Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:

      - 
      p  {
+  
      p  {
   color: red;
 }
      
 
   
      Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.
    • -

      JavaScript est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :

      +

      JavaScript est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :

      - 
      let pElem = document.querySelector('p');
+  
      let pElem = document.querySelector('p');
 pElem.textContent =  'J'ai changé le texte!';
      
 
   
      Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.
      
@@ -120,21 +119,21 @@ pElem.textContent =  'J'ai changé le texte!';

      Outils

      -

      Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

      +

      Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

        -
      • Les outils de développement des navigateurs modernes qui permettent de déboguer votre code.
        • -
      • Des outils de test pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.
        • +
      • Les outils de développement des navigateurs modernes qui permettent de déboguer votre code.
        • +
      • Des outils de test pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.
      • Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .
        • -
      • Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.
        • -
      • Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.
        • +
      • Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.
        • +
      • Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.

      Langages et frameworks « côté serveur »

      -

      HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

      +

      HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

      -

      Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

      +

      Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

      On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

      @@ -142,31 +141,31 @@ pElem.textContent = 'J'ai changé le texte!';

      Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

      -

      Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

      +

      Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

      • L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.
        • -
      • L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.
        • +
      • L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.
      • L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.
      • L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.
      -

      Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

      +

      Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

      -

      Vous rencontrerez les concepts suivants à un moment donné de vos études.

      +

      Vous rencontrerez les concepts suivants à un moment donné de vos études.

        -
      • La compatibilité entre navigateurs consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.
        • -
      • La conception web réactive (responsive) consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.
        • -
      • La performance signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.
        • -
      • L'accessibilité consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?
        • -
      • L'internationalisation signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).
        • -
      • Confidentialité et sécurité. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.
        • +
      • La compatibilité entre navigateurs consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.
        • +
      • La conception web réactive (responsive) consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.
        • +
      • La performance signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.
        • +
      • L'accessibilité consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?
        • +
      • L'internationalisation signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).
        • +
      • Confidentialité et sécurité. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.
      -

      Voir aussi

      +

      Voir aussi

      -
        -
      • Histoire du World Wide Web
        • -
      • Le fonctionnement de l'Internet
        • + diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index df8d360351..f38aeee181 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -2,17 +2,19 @@ title: Les tableaux slug: Learn/JavaScript/First_steps/Arrays tags: - - Apprendre + - Arrays - Article - - Codage - - Débutants + - Beginner + - CodingScripting - JavaScript - - Lier + - Join + - Learn - Pop - Push - - Tableaux - - décalage - - séparer + - l10n:priority + - shift + - split + - unshift translation_of: Learn/JavaScript/First_steps/Arrays original_slug: Learn/JavaScript/First_steps/tableaux --- @@ -41,7 +43,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux

        Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

        -

        Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

        +

        Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

      -

      Nous disposons même de plusieurs systèmes de numération !  Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

      +

      Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

      • Binaire — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.
      • Octal — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.
        • -
      • Hexadécimal — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les CSS.
        • +
      • Hexadécimal — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les CSS.

      Avant que votre cervelle ne se mette à bouillir, stop ! Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.

      @@ -65,15 +66,15 @@ translation_of: Learn/JavaScript/First_steps/Math

      Ce ne sont que des nombres pour moi

      -

      Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

      +

      Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

      {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

      Ouvrir la console dans une nouvelle fenêtre

        -
      1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement  avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : - 
        var myInt = 5;
+ 
      2. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct :
+  
        var myInt = 5;
 var myFloat = 6.667;
 myInt;
 myFloat;
        
@@ -81,7 +82,7 @@ myFloat;
      3. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
      4. Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :
      5. - 
        typeof myInt;
+  
        typeof myInt;
 typeof myFloat;
      6. "number" est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !
        7. @@ -89,31 +90,31 @@ typeof myFloat;

        Méthodes de nombres utiles

        -

        L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être  utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

        +

        L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

        -

        Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

        +

        Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

        -
        let lotsOfDecimal = 1.766584958675746364;
+
        let lotsOfDecimal = 1.766584958675746364;
 lotsOfDecimal;
 let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
 twoDecimalPlaces;
        
 
 
        Convertir en type de données numérique
        
 
-
        Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner  une version numérique de la même valeur.
        
+
        Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner une version numérique de la même valeur.
        
 
 
        Par exemple, essayez de taper ces lignes dans votre console:
        
 
-
        let myNumber = '74';
+
        let myNumber = '74';
 myNumber + 3;
        
 
 
        Vous obtenez le résultat 743, et non pas 77, car myNumber est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:
        
 
-
        typeof myNumber;
        
+
        typeof myNumber;
        
 
 
        Pour réparer le calcul, vous pouvez faire ceci:
        
 
-
        Number(myNumber) + 3;
        
+
        Number(myNumber) + 3;
        
 
 
        Opérateurs arithmétiques
        
 
@@ -170,22 +171,22 @@ myNumber + 3;
        
 
        Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.
    -

    Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.

    +

    Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.

    1. Essayez de saisir quelques exemples simples de votre cru, comme : - 
      10 + 7
+  
      10 + 7
 9 * 8
 60 % 3
    2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : - 
      var num1 = 10;
+  
      var num1 = 10;
 var num2 = 50;
 9 * num1;
 num2 / num1;
    3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : - 
      5 + 10 * 3;
+  
      5 + 10 * 3;
 num2 % 9 * num1;
 num2 + num1 / 8 + 2;
      4. @@ -197,50 +198,50 @@ num2 + num1 / 8 + 2;

      Revenons sur le dernier exemple ci‑dessus, en supposant que num2 contient la valeur 50 et num1 contient 10 (comme défini plus haut) :

      -
      num2 + num1 / 8 + 2;
      +
      num2 + num1 / 8 + 2;
      -

      En tant qu'humain, vous pouvez lire  « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

      +

      En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

      -

      Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

      +

      Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

      Cela est dû aux priorités entre opérateurs — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).

      Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :

      -
      (num2 + num1) / (8 + 2);
      +
      (num2 + num1) / (8 + 2);

      Essayez-le et voyez.

      -

      Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

      +

      Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

      Opérateurs d'incrémentation et de décrémentation

      -

      Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

      +

      Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

      -
      guessCount++;
      +
      guessCount++;
      -

      Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

      +

      Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

      Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :

      -
      3++;
      +
      3++;

      Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :

      -
      var num1 = 4;
+
      var num1 = 4;
 num1++;
      
 
 
      Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, puis incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :
      
 
-
      num1;
      
+
      num1;
      
 
 
      C'est pareil avec -- : essayez ce qui suit
      
 
-
      var num2 = 6;
+
      var num2 = 6;
 num2--;
 num2;
      
 
@@ -252,7 +253,7 @@ num2;
      
 
 
      Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, = — il donne à la variable de gauche la valeur indiquée à droite :
      
 
-
      var x = 3; // x contient la valeur 3
+
      var x = 3; // x contient la valeur 3
 var y = 4; // y contient la valeur 4
 x = y; // x contient maintenant la même valeur que y, 4
      
 
@@ -312,12 +313,12 @@ x = y; // x contient maintenant la même valeur que y, 4
      
 
 
      Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :
      
 
-
      var x = 3; // x contient la valeur 3
+
      var x = 3; // x contient la valeur 3
 var y = 4; // y contient la valeur 4
 x *= y; // x contient maintenant la valeur 12
      
 
 
      
-
      Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.
      
+
      Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.
      
 
      
 
 
      Apprentissage actif : dimensionner une boîte à canevas
      
@@ -393,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12
      
 
 
 
      
-
      Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes.  Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.
      
+
      Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.
      
 
      
 
 
      Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur true/false — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :
      
@@ -407,11 +408,11 @@ x *= y; // x contient maintenant la valeur 12

      Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :

      -
      <button>Démarrer la machine</button>
+
      <button>Démarrer la machine</button>
 <p>La machine est arrêtée.</p>
 
      
 
-
      var btn = document.querySelector('button');
+
      var btn = document.querySelector('button');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -443,7 +444,7 @@ function updateBtn() {
 
      Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.
      
 
 
      
-
      Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.
      
+
      Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.
      
 
      
 
 
      {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
      
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
index b2eae8fff5..ebc7230da3 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
 
 
      
-
      Note: Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.
      
+
      Note: Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.
      
 
      
 
 
      Résumé du projet
      
@@ -52,9 +52,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
 
      Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :
      
 
-
      
+
      
 
-
      Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)
      
+
      Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)
      
 
 
      Les étapes
      
 
@@ -119,7 +119,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
  
    4. 
   
      document.querySelector('html').style.backgroundColor = 'red';
      
  
      5. 
- 
    5. Math.round() est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.
      6. 
+ 
    6. Math.round() est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.
      7. 
 
 
 
      Évaluation
      
@@ -131,13 +131,13 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
      Dans ce module
      
 
 
diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html
index b47662e6ff..4ba256c3a7 100644
--- a/files/fr/learn/server-side/django/development_environment/index.html
+++ b/files/fr/learn/server-side/django/development_environment/index.html
@@ -24,19 +24,19 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
      Aperçu de l'environnement de développement Django
      
 
-
      Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode recommandée pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.
      
+
      Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode recommandée pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.
      
 
 
      Qu'est-ce que l'environnement de développement Django ?
      
 
 
      L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.
      
 
-
      Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple serveur web de développement que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.
      
+
      Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple serveur web de développement que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.
      
 
-
      Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un éditeur de texte ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.
      
+
      Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un éditeur de texte ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.
      
 
-
      Quelles sont les options d'installation de Django ?
      
+
      Quelles sont les options d'installation de Django ?
      
 
-
      Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :
      
+
      Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :
      
 
 
        
  
      • Installé sur divers systèmes d'exploitation.
        • 
@@ -45,10 +45,10 @@ translation_of: Learn/Server-side/Django/development_environment
  
      • Lancé depuis l'environnement principal de Python ou depuis des environnements virtuels Python séparés.
        • 
 
      
 
-
      Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.
      
+
      Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.
      
 
 
      
-
      Note: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.
      
+
      Note: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.
      
 
      
 
 
      Quels systèmes d'exploitation sont supportés ?
      
@@ -81,12 +81,12 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
      Quelle base de données ?
      
 
-
      Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains problèmes potentiels qu'il vaut mieux éviter).
      
+
      Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains problèmes potentiels qu'il vaut mieux éviter).
      
 
 
      Dans cet article (et quasiment tout le module), nous utiliserons la base SQLite, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.
      
 
 
      
-
      Note: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.
      
+
      Note: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.
      
 
      
 
 
      Installation globale ou dans un environnement virtuel Python ?
      
@@ -99,13 +99,13 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
      Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.
      
 
-
      Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des environnements virtuels Python indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.
      
+
      Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des environnements virtuels Python indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.
      
 
 
      Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.
      
 
 
      Installer Python 3
      
 
-
      Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez Python 3, vous aurez alors aussi besoin de l'outil Python Package Index — pip3 — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.
      
+
      Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez Python 3, vous aurez alors aussi besoin de l'outil Python Package Index — pip3 — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.
      
 
 
      Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.
      
 
@@ -120,10 +120,9 @@ translation_of: Learn/Server-side/Django/development_environment
 
      python3 -V
  Python 3.6.6
      
 
-
      Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est pas disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :
      
+
      Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est pas disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :
      
 
-
      sudo apt install python3-pip
-
      
+
      sudo apt install python3-pip
      
 
 
      macOS
      
 
@@ -132,13 +131,13 @@ translation_of: Learn/Server-side/Django/development_environment
 
      python3 -V
  -bash: python3: command not found
      
 
-
      Vous pouvez facilement installer Python 3 (ainsi que l'outil pip3) sur python.org:
      
+
      Vous pouvez facilement installer Python 3 (ainsi que l'outil pip3) sur python.org:
      
 
 
        
  
      1. Téléchargez l'installeur requis :
   
          
-   
        1. Allez sur https://www.python.org/downloads/
          2. 
-   
        2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
          3. 
+   
        3. Allez sur https://www.python.org/downloads/
          4. 
+   
        4. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
          5. 
   
        
  
        2. 
  
      2. Localisez le fichier en utilisant le Finder, puis double-cliquez le fichier package. Suivez les consignes d'installation.
        3. 
@@ -161,8 +160,8 @@ translation_of: Learn/Server-side/Django/development_environment
 
          
  
        1. Téléchargez l'installeur requis :
   
            
-   
          1. Allez sur https://www.python.org/downloads/
            2. 
-   
          2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
            3. 
+   
          3. Allez sur https://www.python.org/downloads/
            4. 
+   
          4. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
            5. 
   
          
  
          2. 
  
        2. Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation
          3. 
@@ -186,66 +185,64 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
          Utiliser Django dans un environnement virtuel Python
          
 
-
          Les librairies que nous utiliserons pour créer nos environnements virtuels seront virtualenvwrapper (Linux et macOS) et virtualenvwrapper-win (Windows), , qui à leur tour utilisent l'outil virtualenv. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.
          
+
          Les librairies que nous utiliserons pour créer nos environnements virtuels seront virtualenvwrapper (Linux et macOS) et virtualenvwrapper-win (Windows), , qui à leur tour utilisent l'outil virtualenv. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.
          
 
 
          Installer l'utilitaire d'environnement virtuel
          
 
 
          Mise en place de l'environnement virtuel sur Ubuntu
          
 
-
          Après avoir installé Python et pip vous pouvez installer virtualenvwrapper (qui inclut virtualenv). Le guide d'installation officiel peut être trouvé ici, ou bien vous pouvez suivre les instructions ci-dessous.
          
+
          Après avoir installé Python et pip vous pouvez installer virtualenvwrapper (qui inclut virtualenv). Le guide d'installation officiel peut être trouvé ici, ou bien vous pouvez suivre les instructions ci-dessous.
          
 
-
          Installer l'outil en utilisant pip3:
          
+
          Installer l'outil en utilisant pip3:
          
 
-
          sudo pip3 install virtualenvwrapper
          
+
          sudo pip3 install virtualenvwrapper
          
 
-
          Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché .bashrc dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :
          
+
          Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché .bashrc dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :
          
 
-
          export WORKON_HOME=$HOME/.virtualenvs
+
          export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
-
          
+source /usr/local/bin/virtualenvwrapper.sh
          
 
 
          
-
          Note: Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
          
+
          Note: Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
          
  
          
- Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.
          
+ Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.
          
 
          
 
 
          Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :
          
 
-
          source ~/.bashrc
          
+
          source ~/.bashrc
          
 
 
          Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :
          
 
-
          virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+
          virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
-
          
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
          
 
-
          Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande mkvirtualenv.
          
+
          Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande mkvirtualenv.
          
 
 
          Mise en place de l'environnement virtuel sur macOS
          
 
-
          L'installation de virtualenvwrapper on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du guide officiel d'installation ou suivre les indications ci-dessous).
          
+
          L'installation de virtualenvwrapper on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du guide officiel d'installation ou suivre les indications ci-dessous).
          
 
-
          Installez virtualenvwrapper (ainsi que virtualenv) en utilisant pip comme indiqué ci-dessous.
          
+
          Installez virtualenvwrapper (ainsi que virtualenv) en utilisant pip comme indiqué ci-dessous.
          
 
-
          sudo pip3 install virtualenvwrapper
          
+
          sudo pip3 install virtualenvwrapper
          
 
 
          Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.
          
 
-
          export WORKON_HOME=$HOME/.virtualenvs
+
          export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
          
+source /usr/local/bin/virtualenvwrapper.sh
          
 
 
          
-
          Note: La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
          
+
          Note: La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
          
 
 
          Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :
          
 
@@ -254,51 +251,49 @@ export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.
 export PROJECT_HOME=$HOME/Devel
 source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
      
 
-
      Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.
      
+
      Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.
    -

    Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : .bash_profile dans votre répertoire home.

    +

    Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : .bash_profile dans votre répertoire home.

    Note: Si vous n'arrivez pas à trouver le fichier .bash_profile depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.

    La commande sera la suivante :

    -
    cd ~  # Naviguer vers le répertoire home
+
    >cd ~  # Naviguer vers le répertoire home
 ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile.
 nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal.
 # Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus.
-# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.
-
    
+# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.

    Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :

    -
    source ~/.bash_profile
    +
    source ~/.bash_profile
    -

    Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande mkvirtualenv.

    +

    Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande mkvirtualenv.

    Mise en place de l'environnement virtuel sur Windows 10

    -

    Installer virtualenvwrapper-win est encore plus simple qu'installer virtualenvwrapper , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :

    +

    Installer virtualenvwrapper-win est encore plus simple qu'installer virtualenvwrapper , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :

    -
    pip3 install virtualenvwrapper-win
    +
    pip3 install virtualenvwrapper-win
    -

    Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv

    +

    Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv

    Créer un environnement virtuel

    -

    Maintenant que vous avez installé virtualenvwrapper ou virtualenvwrapper-win , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.

    +

    Maintenant que vous avez installé virtualenvwrapper ou virtualenvwrapper-win , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.

    -

    Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).

    +

    Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).

    -
    $ mkvirtualenv my_django_environment
+
    $ mkvirtualenv my_django_environment
 
 Running virtualenv with interpreter /usr/bin/python3
 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$
-
    
+(my_django_environment) ubuntu@ubuntu:~$

    Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.

    @@ -311,18 +306,17 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get

    Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :

      -
    • deactivate — Permet de sortir de l'environnement virtuel Python actuel
      • -
    • workon — Lister tous les environnements virtuels disponibles
      • -
    • workon name_of_environment — Activer l'environnement virtuel spécifié
      • -
    • rmvirtualenv name_of_environment — Supprimer l'environnement virtuel spécifié
      • +
    • deactivate — Permet de sortir de l'environnement virtuel Python actuel
      • +
    • workon — Lister tous les environnements virtuels disponibles
      • +
    • workon name_of_environment — Activer l'environnement virtuel spécifié
      • +
    • rmvirtualenv name_of_environment — Supprimer l'environnement virtuel spécifié

    Installer Django

    -

    Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé workon pour y entrer, vous pouvez utiliser pip3 pour installer Django. 

    +

    Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé workon pour y entrer, vous pouvez utiliser pip3 pour installer Django.

    -
    pip3 install django
-
    +
    pip3 install django

    Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :

    @@ -332,8 +326,7 @@ python3 -m django --version # Windows py -3 -m django --version - 2.1.5 - + 2.1.5

    Note: Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :

    @@ -344,7 +337,7 @@ py -3 -m django --version
    -

    Important: Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3

    +

    Important: Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3

    Tester votre installation

    @@ -352,15 +345,14 @@ py -3 -m django --version

    Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.

    mkdir django_test
-cd django_test
-
    +cd django_test -

    Vous pouvez ensuite créer un nouveau site squelette intitulé "mytestsite" utilisant l'outil django-admin omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé manage.py.

    +

    Vous pouvez ensuite créer un nouveau site squelette intitulé "mytestsite" utilisant l'outil django-admin omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé manage.py.

    django-admin startproject mytestsite
 cd mytestsite
    -

    Nous pouvons lancer le serveur web de développement depuis ce dossier en utilisant manage.py et la commande runserver command, comme indiqué ci-dessous.

    +

    Nous pouvons lancer le serveur web de développement depuis ce dossier en utilisant manage.py et la commande runserver command, comme indiqué ci-dessous.

    $ python3 manage.py runserver
 Performing system checks...
@@ -377,20 +369,18 @@ Quit the server with CONTROL-C.
    -

    Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !

    +

    Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !

    -

    Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : http://127.0.0.1:8000/. Vous devriez voir un site ressemblant à celui-ci :
    - Django Skeleton App Homepage - Django 2.0

    +

    Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : http://127.0.0.1:8000/. Vous devriez voir un site ressemblant à celui-ci :

    -
      -
    +

    Django Skeleton App Homepage - Django 2.0

    Résumé

    Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.

    -

    Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant django-admin startproject, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (python3 manage.py runserver). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.

    +

    Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant django-admin startproject, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (python3 manage.py runserver). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.

    See also

    @@ -405,19 +395,19 @@ Quit the server with CONTROL-C.

    In this module

    diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html index b905f66546..2f6aa2a4b6 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -1,5 +1,5 @@ --- -title: Understanding client-side JavaScript frameworks +title: Comprendre les frameworks JavaScript côté client slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks tags: - Beginner @@ -14,24 +14,24 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks

    Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.

    -

    En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.

    +

    En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.

    -

    Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :

    +

    Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :

      -
    • Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?
      • -
    • Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?
      • -
    • Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs  implantations de ces fonctionnalités ?
      • -
    • Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?
      • +
    • Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ?
      • +
    • Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ?
      • +
    • Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs  implantations de ces fonctionnalités ?
      • +
    • Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ?
    -

    Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.

    +

    Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.

    -

    Commencez dès maintenant, avec "Introduction aux frameworks côté client"

    +

    Commencez dès maintenant, avec "Introduction aux frameworks côté client"

    Prérequis

    -

    Vous devez vraiment connaitre les bases des principaux langages du web (HTML, CSS, et particulièrement JavaScript) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.

    +

    Vous devez vraiment connaitre les bases des principaux langages du web (HTML, CSS, et particulièrement JavaScript) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.

    Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.

    @@ -39,121 +39,121 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks

    Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

    -

    Commencer

    +

    Commencer

    Guides d'introduction

    -
    1. Introduction aux frameworks côté client
    +
    1. Introduction aux frameworks côté client
    Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.
    -
    2. Principales caractéristiques du Framework
    -
    Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.
    +
    2. Principales caractéristiques du Framework
    +
    Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.

    Tutoriels sur React

    -
    -

    Note: Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.

    +
    +

    Note : Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.

    Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre todo-react repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-react-build/.

    -
    1. Premier pas avec React
    +
    1. Premier pas avec React
    Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.
    -
    2. Début de notre liste de tâches React
    +
    2. Début de notre liste de tâches React
    Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.
    -
    3. Diviser notre application React en composants
    +
    3. Diviser notre application React en composants
    À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.
    -
    4. Interactivité de React: évènements et états
    +
    4. Interactivité de React: évènements et états
    Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.
    -
    5. Interactivité de React: modification, filtrage, rendu conditionné
    +
    5. Interactivité de React: modification, filtrage, rendu conditionné
    Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.
    -
    6. Accessibilité dans React
    +
    6. Accessibilité dans React
    Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.
    -
    7. Ressources sur React
    +
    7. Ressources sur React
    Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.

    Tutoriels sur Ember

    -
    -

    Note: Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.

    +
    +

    Note : Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.

    Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the ember-todomvc-tutorial repository. Pour une version exécutable en direct, voir https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).

    -
    1. Premiers pas avec Ember
    +
    1. Premiers pas avec Ember
    Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.
    -
    2. Structure et composant de l'application Ember
    +
    2. Structure et composant de l'application Ember
    Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.
    -
    3. Interactivité Ember : évènements, classes et états
    +
    3. Interactivité Ember : évènements, classes et états
    À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.
    -
    4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné
    +
    4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné
    Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.
    -
    5. Routage dans Ember
    +
    5. Routage dans Ember
    Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".
    -
    6. Ressources sur Ember et dépannage
    +
    6. Ressources sur Ember et dépannage
    Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.

    Tutoriels sur Vue

    -
    -

    Note: Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.

    +
    +

    Note : Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.

    Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre todo-vue repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-vue/dist/.

    -
    1. Premiers pas avec Vue
    +
    1. Premiers pas avec Vue
    Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.
    -
    2. Création de notre premier composant Vue
    +
    2. Création de notre premier composant Vue
    Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.
    -
    3. Rendu d'une liste de composants Vue
    -
    À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants ToDoItem à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant App.vue que nous allons ensuite parcourir et afficher à l'intérieur des composants ToDoItem à l'aide de la directive v-for.
    -
    4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue
    +
    3. Rendu d'une liste de composants Vue
    +
    À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants ToDoItem à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant App.vue que nous allons ensuite parcourir et afficher à l'intérieur des composants ToDoItem à l'aide de la directive v-for.
    +
    4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue
    Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un ToDoItem dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <input>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.
    -
    5. Styliser les composants Vue avec CSS
    +
    5. Styliser les composants Vue avec CSS
    Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.
    -
    6. Utilisation des propriétés calculées de Vue
    +
    6. Utilisation des propriétés calculées de Vue
    Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.
    -
    7. Rendu conditionnel Vue : éditer les todos existants
    +
    7. Rendu conditionnel Vue : éditer les todos existants
    Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir v-if et v-else — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.
    -
    8. Gestion de la mise au poinr avec les références de Vue
    +
    8. Gestion de la mise au poinr avec les références de Vue
    Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.
    -
    9. Ressources Vue
    +
    9. Ressources Vue
    Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.

    Tutoriels sur Svelte

    -
    +

    Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.

    Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt mdn-svelte-tutorial. Pour une version exécutable en direct, voir https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

    -
    1. Premiers pas avec Svelte
    +
    1. Premiers pas avec Svelte
    Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.
    -
    2. Commencer notre application todolist avec Svelte
    +
    2. Commencer notre application todolist avec Svelte
    Maintenant que nous avons compris les bases du fonctionnement  de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.
    -
    3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés
    +
    3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés
    Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.
    -
    4. Diviser notre application Svelte en composants
    +
    4. Diviser notre application Svelte en composants
    L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.
    -
    5. Svelte avancé : réactivité, cycle de vie et accessibilité
    +
    5. Svelte avancé : réactivité, cycle de vie et accessibilité
    Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.
    -
    6. Travailler avec le stockage de Svelte
    +
    6. Travailler avec le stockage de Svelte
    Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.
    -
    7. Support de TypeScript avec Svelte
    +
    7. Support de TypeScript avec Svelte
    Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.
    -
    8. Déploiement et étapes suivantes
    +
    8. Déploiement et étapes suivantes
    Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.
    @@ -166,7 +166,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
    • Ce sont des outils populaires qui dureront un certain temps – comme avec tout outil logiciel, il est bon de s'en tenir à des outils activement développés et qui ne seront probablement pas interrompus la semaine prochaine et qui constitueront des atouts considérables à vos compétences lorsque vous cherchez un emploi,
    • Ils ont des communautés solides et de bonnes documentations. C'est très important pour être en mesure de recevoir de l'aide lors de votre apprentissage d'un sujet complexe, surtout lorsque vous débutez.
      • -
    • Nous n'avons pas les ressources nécessaires pour couvrir tous les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.
      • +
    • Nous n'avons pas les ressources nécessaires pour couvrir tous les frameworks modernes. De toute façon, cette liste serait très difficile à tenir à jour car de nouveaux apparaissent tout le temps.
    • En tant que débutant, choisir sur quoi se pencher parmi le grand nombre de choix disponibles est un problème très réel. Faire en sorte que cette liste soit courte est donc utile.
    diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html index cc0709e279..19933cfd0d 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html @@ -24,7 +24,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ Prérequis :

    Être familiarisé avec les bases des langages

    - HTML, CSS, et JavaScript. + HTML, CSS, et JavaScript. Objectif : @@ -35,7 +35,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ -

    Bienvenue sur le terminal

    +

    Bienvenue sur le terminal

    Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).

    @@ -47,7 +47,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_

    .

    -

    Quelle est l'origine du terminal ?

    +

    Quelle est l'origine du terminal ?

    Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia Terminal (informatique).

    @@ -57,19 +57,19 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_

    En tous cas, le terminal ne va pas disparaître de si tôt.

    -

    À quoi ressemble un terminal ?

    +

    À quoi ressemble un terminal ?

    Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.

    -

    Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d’options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

    +

    Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

    -

    A vanilla windows cmd line window, and a windows powershell window

    +

    A vanilla windows cmd line window, and a windows powershell window

    -

    Et ci-dessous, vous pouvez voir l’application de terminal pour macOS.

    +

    Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.

    -

    A basic vanilla mac terminal

    +

    A basic vanilla mac terminal

    -

    Comment ouvrir un terminal ?

    +

    Comment ouvrir un terminal ?

    Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.

    @@ -85,27 +85,27 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_

    Windows

    -

    Comme pour d'autres outils de programmation, c’est un peu une tradition pour Windows de ne pas faciliter l’utilisation du terminal (ou ligne de commande) par rapport à d’autres systèmes d’exploitation. Mais les choses s’améliorent.

    +

    Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.

    -

    Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l’invite de commande »), mais celui-ci n’est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

    +

    Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

    -

    On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l’installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

    +

    On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l'installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

    -

    Quoi qu’il en soit, aujourd’hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d’exploitation Linux directement dans Windows 10, ce qui vous permet d’avoir un « vrai terminal », sans recourir à une machine virtuelle.

    +

    Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.

    -

    Vous pouvez l’installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

    +

    Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

    -

    a screenshot of the windows subsystem for linux documentation

    +

    a screenshot of the windows subsystem for linux documentation

    -

    Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l’invite de commande par défaut (« cmd »), et faire tourner pas mal d’outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

    +

    Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

    -

    En passant, quelle est la différence entre ligne de commande et terminal ?

    +

    En passant, quelle est la différence entre ligne de commande et terminal ?

    -

    En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l’invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

    +

    En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

    Est-ce qu'il faut se servir du terminal?

    -

    Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d’extensions que vous pourrez utiliser pour vous aider dans l’édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

    +

    Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

    Les commandes intégrées de base

    @@ -128,8 +128,8 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
  • Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <div> dans un fichier HTML par <article>): awk, tr, sed
    • -
    -

    Note : On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

    +
    +

    Note : On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

    Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !

    @@ -142,17 +142,17 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_

    Pour changer de répertoire, vous tapez cd dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) Desktop se trouve dans votre répertoire utilisateur, vous allez donc taper cd Desktop (voir les copies d'écran ci-dessous).

    -

    results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

    +

    results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

    Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :

    -
    cd Bureau
    +
    cd Bureau

    Si vous voulez revenir au répertoire précédent, utilisez les deux points :

    -
    cd ..
    +
    cd ..
    -
    +

    Note: Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.

    @@ -160,18 +160,18 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_

    Par exemple, si vous vouliez aller dans un dossier nommé src, qui se trouve dans un dossier nommé projet, qui est lui-même sur le Bureau, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :

    -
    cd Bureau
+
    cd Bureau
 cd projet
 cd src
    
 
 
    Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :
    
 
-
    cd Bureau/projet/src
    
+
    cd Bureau/projet/src
    
 
 
    Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".
    
 
-
    
-
    Note: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
    
+
    
+
    Note: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
    
 
    
 
 
    Lister le contenu d'un répertoire
    
@@ -180,7 +180,7 @@ cd src

    Essayez de taper ceci dans votre terminal :

    -
    ls
    +
    ls

    Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.

    @@ -190,19 +190,19 @@ cd src

    Voyez par exemple ce que vous obtenez en essayant ceci :

    -
    ls -l
    +
    ls -l

    Avec ls, l'option -l (tiret l, "dash ell" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande cd.

    Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande ls -l :

    -

    A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

    +

    A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

    -
    +

    Note: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).

    -
    +

    Note: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !

    @@ -216,14 +216,14 @@ cd src
    • mkdir — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, mkdir mon-super-site va créer un nouveau répertoire nommé mon-super-site.
      • -
    • rmdir — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple  rmdir mon-super-site va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option -r (recursive), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.
      • +
    • rmdir — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple rmdir mon-super-site va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option -r (recursive), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.
    • touch — crée un nouveau fichier vide dans le répertoire courant. Par exemple, touch mdn-exemple.md crée un fichier vide nommé mdn-exemple.md.
    • mv — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple mv mdn-exemple.md mdn-exemple.txt (les emplacements sont écrits sous la forme de chemins - file paths). Cette commande déplace un fichier nommé mdn-exemple.md situé dans le répertoire courant vers une fichier nommé mdn-exemple.txt dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.
    • cp — d'un usage similaire à mv, cp copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, cp mdn-exemple.txt mdn-exemple.txt.bak crée une copie de mdn-exemple.txt nommée mdn-exemple.txt.bak (bien entendu vous pouvez la nommer comme vous voulez).
    • rm — supprimer le fichier spécifié. Par exemple, rm mdn-exemple.txt efface un fichier unique nommé mdn-exemple.txt. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.
    -
    +

    Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.

    @@ -235,7 +235,7 @@ cd src

    Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site Glitch.com est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.

    -

    a double screenshot showing the glitch.com home page, and the glitch terminal emulator

    +

    a double screenshot showing the glitch.com home page, and the glitch terminal emulator

    Le site tldr.sh est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.

    @@ -247,61 +247,61 @@ cd src

    Nous avons déjà vu ls, qui liste le contenu du répertoire courant :

    -
    ls
    +
    ls

    Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? ls n'est pas capable de faire cela à lui seul.

    Il existe un autre outil Unix nommé wc. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de monfichier.txt :

    -
    wc -l monfichier.txt
    +
    wc -l monfichier.txt
    -

    Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls  (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

    +

    Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

    -
    ls | wc -l
    +
    ls | wc -l

    Comme ls affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.

    -

    Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou  STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

    +

    Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

    L'opérateur pipe peut connecter ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, ls enverrait normalement sa sortie sur STDOUT, mais au lieu de cela la sortie de ls est passée par un pipe à wc, qui la prend en entrée, compte ses lignes et imprime ce décompte sur STDOUT.

    Un exemple un peu plus complexe

    -

    Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl  (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/en-US/docs/Web/API/fetch.

    +

    Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/fr/docs/Web/API/fetch.

    -

    En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

    +

    En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

    Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :

    -
    curl https://developer.mozilla.org/en-US/docs/Web/API/fetch
    +
    curl https://developer.mozilla.org/fr/docs/Web/API/fetch

    Nous devons dire explicitement à curl de suivre les redirections en utilisant l'option -L.

    -

    Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

    +

    Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

    Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :

    -
    curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
    +
    curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location

    Votre sortie devrait ressembler à ceci (curl va d'abord afficher des compteurs et autres informations de téléchargement) :

    -
    location: /en-US/docs/Web/API/fetch
-location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-location: /en-US/docs/Web/API/GlobalFetch/fetch
-location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
    +
    location: /fr/docs/Web/API/fetch
+location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+location: /fr/docs/Web/API/GlobalFetch/fetch
+location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
    -

    Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

    +

    Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

    Essayez de lancer cette commande :

    -
    curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
    +
    curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'

    Votre sortie finale devrait ressembler à ceci :

    -
    https://developer.mozilla.org/en-US/docs/Web/API/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
    +
    https://developer.mozilla.org/fr/docs/Web/API/fetch
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch
+https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch

    En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL /docs/Web/API/fetch.
    Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.

    @@ -316,9 +316,9 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

    Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.

    -

    the node.js installer on windows, showing the option to include npm

    +

    the node.js installer on windows, showing the option to include npm

    -

    Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept  "peu d'options" peut se révéler très attractif.

    +

    Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.

    Où installer nos outils de CLI ?

    @@ -361,11 +361,11 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

    Bien que la liste des contre soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.

    -

    Installation de Prettier

    +

    Installation de Prettier

    Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.

    -

    Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

    +

    Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

    Prettier offre les avantages suivants :

    @@ -378,17 +378,17 @@ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

    Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :

    -
    npm install --global prettier
    +
    npm install --global prettier

    Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.

    En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :

    -
    prettier
    +
    prettier

    La sortie devrait ressembler à ceci :

    -
    Usage: prettier [options] [file/glob ...]
+
    Usage: prettier [options] [file/glob ...]
 
 By default, output is written to stdout.
 Stdin is read if it is piped to Prettier and no files are given.
@@ -401,41 +401,41 @@ Stdin is read if it is piped to Prettier and no files are given.
 
 
    Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.
    
 
-
    Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.
    
+
    Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.
    
 
 
    Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom index.js.
    
 
-
    const myObj = {
+
    const myObj = {
 a:1,b:{c:2}}
 function printMe(obj){console.log(obj.b.c)}
 printMe(myObj)
    
 
-
    Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :
    
+
    Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :
    
 
-
    prettier --check index.js
    
+
    prettier --check index.js
    
 
 
    Vous devriez obtenir quelque chose comme
    
 
-
    Checking formatting...
+
    Checking formatting...
 index.js
 Code style issues found in the above file(s). Forgot to run Prettier?
 
    
 
-
    Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.
    
+
    Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.
    
 
 
    Essayez maintenant de lancer cette version de la commande :
    
 
-
    prettier --write index.js
    
+
    prettier --write index.js
    
 
 
    La sortie ressemble maintenant à ceci
    
 
-
    Checking formatting...
+
    Checking formatting...
 index.js
 Code style issues fixed in the above file(s).
    
 
 
    Mais le plus important, c'est que votre fichier JavaScript a été reformaté :
    
 
-
    const myObj = {
+
    const myObj = {
   a: 1,
   b: { c: 2 },
 };
@@ -444,45 +444,45 @@ function printMe(obj) {
 }
 printMe(myObj);
    
 
-
    Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.
    
+
    Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.
    
 
 
    Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :
    
 
 
      
- 
    • Avant de faire un commit sur un dépôt git en utilisant Husky.
      • 
- 
    • Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de VS Code, d'Atom, ou de Sublime Text.
      • 
- 
    • En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que Github Actions.
      • 
+ 
    • Avant de faire un commit sur un dépôt git en utilisant Husky.
      • 
+ 
    • Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de VS Code, d'Atom, ou de Sublime Text.
      • 
+ 
    • En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que Github Actions.
      • 
 
    
 
-
    Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.
    
+
    Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.
    
 
 
    Autres outils à essayer
    
 
 
    Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :
    
 
 
      
- 
    • bat — Un cat  plus "beau" (cat affiche le contenu d'un fichier) (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris).
      • 
- 
    • prettyping — implémentation visuellement améliorée de la commande ping (ping permet de tester si un serveur répond).
      • 
- 
    • htop — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.
      • 
- 
    • tldr — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.
      • 
+ 
    • bat — Un cat  plus "beau" (cat affiche le contenu d'un fichier) (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris).
      • 
+ 
    • prettyping — implémentation visuellement améliorée de la commande ping (ping permet de tester si un serveur répond).
      • 
+ 
    • htop — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.
      • 
+ 
    • tldr — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.
      • 
 
    
 
-
    L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.
    
+
    L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.
    
 
-
    Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.
    
+
    Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.
    
 
 
    Résumé
    
 
-
    Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.
    
+
    Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.
    
 
 
    {{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
    
 
 
    Dans ce module
    
 
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html
index 413b936371..3a76beed7c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.html
@@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomSiteSpecif
 
 
    Lors de l'installation de Firefox, browser.zoom.siteSpecific est à vrai.
    
 
-
    Si privacy.websites.resistFingerprinting est à vrai, ce réglage ne peut pas être changé et le niveau de zoom est appliqué sur le schéma par-onglet.
    
+
    Si privacy.websites.resistFingerprinting est à vrai, ce réglage ne peut pas être changé et le niveau de zoom est appliqué sur le schéma par-onglet.
    
 
 
    Compatibilité du navigateur
    
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html
index 1de179058c..ad889267c4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.html
@@ -16,27 +16,27 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
 ---
 
    {{AddonSidebar}}
    
 
-
    Permet d’interagir avec le système d’onglets du navigateur.
    
+
    Permet d'interagir avec le système d'onglets du navigateur.
    
 
-
    Vous pouvez utiliser cette API pour obtenir une liste des onglets ouverts, filtrés par différents critères, ainsi que pour ouvrir, mettre à jour, déplacer, recharger et supprimer des onglets. Vous ne pouvez pas accéder directement au contenu hébergé par les onglets à l’aide de cette API, mais vous pouvez insérer du JavaScript et du CSS dans les onglets en utilisant les API {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}.
    
+
    Vous pouvez utiliser cette API pour obtenir une liste des onglets ouverts, filtrés par différents critères, ainsi que pour ouvrir, mettre à jour, déplacer, recharger et supprimer des onglets. Vous ne pouvez pas accéder directement au contenu hébergé par les onglets à l'aide de cette API, mais vous pouvez insérer du JavaScript et du CSS dans les onglets en utilisant les API {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}.
    
 
 
    Vous pouvez utiliser la majeure partie de cette API sans autorisation spéciale. Toutefois :
    
 
 
      
- 
    • Pour accéder à Tab.url, Tab.title et Tab.favIconUrl, vous devez avoir la permission "tabs".
+ 
    • Pour accéder à Tab.url, Tab.title et Tab.favIconUrl, vous devez avoir la permission "tabs".
 
   
        
-   
      • Dans Firefox, cela signifie également que vous avez besoin de "tabs" pour {{WebExtAPIRef("tabs.query", "requête d’onglet")}} par URL.
        • 
+   
      • Dans Firefox, cela signifie également que vous avez besoin de "tabs" pour {{WebExtAPIRef("tabs.query", "requête d'onglet")}} par URL.
        • 
   
      
  
      • 
  
    • 
-  
      Pour utiliser {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}, vous devez avoir les permission d’hôte pour l’onglet.
      
+  
      Pour utiliser {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}, vous devez avoir les permission d'hôte pour l'onglet.
      
  
      • 
 
    
 
-
    Alternativement, vous pouvez obtenir ces autorisations temporairement, uniquement pour l’onglet actuellement actif et uniquement en réponse à une action explicite de l’utilisateur ou de l’utilisatrice, en demandant la permission "activeTab".
    
+
    Alternativement, vous pouvez obtenir ces autorisations temporairement, uniquement pour l'onglet actuellement actif et uniquement en réponse à une action explicite de l'utilisateur ou de l'utilisatrice, en demandant la permission "activeTab".
    
 
-
    De nombreuses opérations d’onglet utilisent un identifiant (id) d’onglet. Les id d’onglets sont seulement garantis uniques à un onglet durant une session de navigation. Si le navigateur est redémarré, il pourra recycler, et recyclera, les id d’onglets. Pour associer des informations à un onglet à travers les redémarrages du navigateur, utilisez {{WebExtAPIRef("sessions.setTabValue()")}}.
    
+
    De nombreuses opérations d'onglet utilisent un identifiant (id) d'onglet. Les id d'onglets sont seulement garantis uniques à un onglet durant une session de navigation. Si le navigateur est redémarré, il pourra recycler, et recyclera, les id d'onglets. Pour associer des informations à un onglet à travers les redémarrages du navigateur, utilisez {{WebExtAPIRef("sessions.setTabValue()")}}.
    
 
 
    Types
    
 
@@ -44,21 +44,21 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  
    {{WebExtAPIRef("tabs.MutedInfoReason")}}
    
  
    Spécifie la raison pour laquelle un onglet a été rendu silencieux ou à nouveau sonore.
    
  
    {{WebExtAPIRef("tabs.MutedInfo")}}
    
- 
    Cet objet contient un booléen indiquant si l’onglet est silencieux et la raison de la dernière modification de l’état.
    
+ 
    Cet objet contient un booléen indiquant si l'onglet est silencieux et la raison de la dernière modification de l'état.
    
  
    {{WebExtAPIRef("tabs.PageSettings")}}
    
  
    
- 
    Permet de contrôler le rendu d’un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}.
    
+ 
    Permet de contrôler le rendu d'un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}.
    
  
    
  
    {{WebExtAPIRef("tabs.Tab")}}
    
  
    Ce type contient des informations sur un onglet.
    
  
    {{WebExtAPIRef("tabs.TabStatus")}}
    
- 
    Indique si l’onglet a fini de charger.
    
+ 
    Indique si l'onglet a fini de charger.
    
  
    {{WebExtAPIRef("tabs.WindowType")}}
    
  
    Le type de fenêtre qui héberge cet onglet.
    
  
    {{WebExtAPIRef("tabs.ZoomSettingsMode")}}
    
- 
    Définit si les modifications de zoom sont traitées par le navigateur, par l’extension ou sont désactivées.
    
+ 
    Définit si les modifications de zoom sont traitées par le navigateur, par l'extension ou sont désactivées.
    
  
    {{WebExtAPIRef("tabs.ZoomSettingsScope")}}
    
- 
    Définit si les modifications de zoom persisteront pour l’origine de la page ou ne prendront effet que dans cet onglet.
    
+ 
    Définit si les modifications de zoom persisteront pour l'origine de la page ou ne prendront effet que dans cet onglet.
    
  
    {{WebExtAPIRef("tabs.ZoomSettings")}}
    
  
    Définit les paramètres de zoom {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, et le facteur de zoom par défaut.
    
 
@@ -67,18 +67,18 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
 
 
    
  
    {{WebExtAPIRef("tabs.TAB_ID_NONE")}}
    
- 
    Une valeur d’id spéciale donnée aux onglets qui ne sont pas des onglets de navigation (par exemple, les onglets dans les fenêtres devtools).
    
+ 
    Une valeur d'id spéciale donnée aux onglets qui ne sont pas des onglets de navigation (par exemple, les onglets dans les fenêtres devtools).
    
 
    
 
 
    Fonctions
    
 
 
    
  
    {{WebExtAPIRef("tabs.captureTab()")}}
    
- 
    Crée un URI de données codant une image de la zone visible de l’onglet donné.
    
+ 
    Crée un URI de données codant une image de la zone visible de l'onglet donné.
    
  
    {{WebExtAPIRef("tabs.captureVisibleTab()")}}
    
- 
    Crée un URI de données codant une image de la zone visible de l’onglet actuellement actif dans la fenêtre donnée.
    
+ 
    Crée un URI de données codant une image de la zone visible de l'onglet actuellement actif dans la fenêtre donnée.
    
  
    {{WebExtAPIRef("tabs.connect()")}}
    
- 
    Définit une connexion pour échanger des messages entre les scripts d’arrière-plan de l’extension (ou d’autres scripts privilégiés, tels que les scripts de popups ou les scripts de page d’options) et les scripts de contenu s’exécutant dans l’onglet spécifié.
    
+ 
    Définit une connexion pour échanger des messages entre les scripts d'arrière-plan de l'extension (ou d'autres scripts privilégiés, tels que les scripts de popups ou les scripts de page d'options) et les scripts de contenu s'exécutant dans l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.create()")}}
    
  
    Crée un nouvel onglet.
    
  
    {{WebExtAPIRef("tabs.detectLanguage()")}}
    
@@ -90,17 +90,17 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  
    {{WebExtAPIRef("tabs.executeScript()")}}
    
  
    Injecte du code JavaScript dans une page.
    
  
    {{WebExtAPIRef("tabs.get()")}}
    
- 
    Obtient des détails sur l’onglet spécifié.
    
+ 
    Obtient des détails sur l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}
    
  
    Obtient des détails sur tous les onglets de la fenêtre spécifiée.
    
  
    {{WebExtAPIRef("tabs.getCurrent()")}}
    
- 
    Obtient des informations sur l’onglet dans lequel ce script s’exécute, en tant qu’objet {{WebExtAPIRef("tabs.Tab")}}.
    
+ 
    Obtient des informations sur l'onglet dans lequel ce script s'exécute, en tant qu'objet {{WebExtAPIRef("tabs.Tab")}}.
    
  
    {{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}
    
- 
    Obtient l’onglet sélectionné dans la fenêtre spécifiée. Deprecated: utilisez plutôt tabs.query({active: true}).
    
+ 
    Obtient l'onglet sélectionné dans la fenêtre spécifiée. Deprecated: utilisez plutôt tabs.query({active: true}).
    
  
    {{WebExtAPIRef("tabs.getZoom()")}}
    
- 
    Obtient le facteur de zoom actuel de l’onglet spécifié.
    
+ 
    Obtient le facteur de zoom actuel de l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.getZoomSettings()")}}
    
- 
    Obtient les paramètres de zoom actuels pour l’onglet spécifié.
    
+ 
    Obtient les paramètres de zoom actuels pour l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.goForward()")}}
    
  
    Passez à la page suivante, si vous en avez une.
    
  
    {{WebExtAPIRef("tabs.goBack()")}}
    
@@ -114,66 +114,66 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  
    {{WebExtAPIRef("tabs.move()")}}
    
  
    Déplace un ou plusieurs onglets vers une nouvelle position dans la même fenêtre ou vers une autre fenêtre.
    
  
    {{WebExtApiRef("tabs.moveInSuccession()")}}
    
- 
    Modifie la relation de succession pour un groupe d’onglets.
    
+ 
    Modifie la relation de succession pour un groupe d'onglets.
    
  
    {{WebExtAPIRef("tabs.print()")}}
    
- 
    Imprime le contenu de l’onglet actif.
    
+ 
    Imprime le contenu de l'onglet actif.
    
  
    {{WebExtAPIRef("tabs.printPreview()")}}
    
  
    
- 
    Ouvre l’aperçu avant impression pour l’onglet actif.
    
+ 
    Ouvre l'aperçu avant impression pour l'onglet actif.
    
  
    
  
    {{WebExtAPIRef("tabs.query()")}}
    
- 
    Obtient tous les onglets ayant les propriétés spécifiées, ou tous les onglets si aucune propriété n’est spécifiée.
    
+ 
    Obtient tous les onglets ayant les propriétés spécifiées, ou tous les onglets si aucune propriété n'est spécifiée.
    
  
    {{WebExtAPIRef("tabs.reload()")}}
    
  
    Recharge un onglet, en contournant éventuellement le cache web local.
    
  
    {{WebExtAPIRef("tabs.remove()")}}
    
  
    Ferme un ou plusieurs onglets.
    
  
    {{WebExtAPIRef("tabs.removeCSS()")}}
    
- 
    Supprime d’une page CSS qui a été précédemment injectée en appelant {{WebExtAPIRef("tabs.insertCSS()")}}.
    
+ 
    Supprime d'une page CSS qui a été précédemment injectée en appelant {{WebExtAPIRef("tabs.insertCSS()")}}.
    
  
    {{WebExtAPIRef("tabs.saveAsPDF()")}}
    
  
    Enregistre la page en cours au format PDF.
    
  
    {{WebExtAPIRef("tabs.sendMessage()")}}
    
- 
    Envoie un message unique au(x) script(s) de contenu dans l’onglet spécifié.
    
+ 
    Envoie un message unique au(x) script(s) de contenu dans l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}
    
- 
    Envoie une requête unique au(x) script(s) de contenu dans l’onglet spécifié. Déprécié : utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.
    
+ 
    Envoie une requête unique au(x) script(s) de contenu dans l'onglet spécifié. Déprécié : utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place.
    
  
    {{WebExtAPIRef("tabs.setZoom()")}}
    
- 
    Effectue un zoom sur l’onglet spécifié.
    
+ 
    Effectue un zoom sur l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.setZoomSettings()")}}
    
- 
    Définit les paramètres de zoom pour l’onglet spécifié.
    
+ 
    Définit les paramètres de zoom pour l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.show()")}} {{experimental_inline}}
    
  
    Affiche un ou plusieurs onglets qui ont été {{WebExtAPIRef("tabs.hide()", "masqués")}}.
    
  
    {{WebExtAPIRef("tabs.toggleReaderMode()")}}
    
- 
    Bascule en mode lecture pour l’onglet spécifié.
    
+ 
    Bascule en mode lecture pour l'onglet spécifié.
    
  
    {{WebExtAPIRef("tabs.update()")}}
    
- 
    Charge une nouvelle URL dans l’onglet, ou modifie d’autres propriétés de l’onglet.
    
+ 
    Charge une nouvelle URL dans l'onglet, ou modifie d'autres propriétés de l'onglet.
    
 
    
 
 
    Évènements
    
 
 
    
  
    {{WebExtAPIRef("tabs.onActivated")}}
    
- 
    Est émis lorsque l’onglet actif dans une fenêtre change. Notez que l’URL de l’onglet peut ne pas être définie au moment où cet évènement a été émis.
    
+ 
    Est émis lorsque l'onglet actif dans une fenêtre change. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet évènement a été émis.
    
  
    {{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}
    
- 
    Est émis lorsque l’onglet sélectionné dans une fenêtre change. Déprécié : utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
    
+ 
    Est émis lorsque l'onglet sélectionné dans une fenêtre change. Déprécié : utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
    
  
    {{WebExtAPIRef("tabs.onAttached")}}
    
- 
    Est émis lorsqu’un onglet est attaché à une fenêtre, par exemple parce qu’il a été déplacé entre différentes fenêtres.
    
+ 
    Est émis lorsqu'un onglet est attaché à une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres.
    
  
    {{WebExtAPIRef("tabs.onCreated")}}
    
- 
    Est émis lorsqu’un onglet est créé. Notez que l’URL de l’onglet peut ne pas être définie au moment où cet évènement a été émis.
    
+ 
    Est émis lorsqu'un onglet est créé. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet évènement a été émis.
    
  
    {{WebExtAPIRef("tabs.onDetached")}}
    
- 
    Est émis lorsqu’un onglet est détaché d’une fenêtre, par exemple parce qu’il a été déplacé entre différentes fenêtres.
    
+ 
    Est émis lorsqu'un onglet est détaché d'une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres.
    
  
    {{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}
    
  
    Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent. Déprécié : utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place.
    
  
    {{WebExtAPIRef("tabs.onHighlighted")}}
    
  
    Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent.
    
  
    {{WebExtAPIRef("tabs.onMoved")}}
    
- 
    Est émis lorsqu’un onglet est déplacé dans une fenêtre.
    
+ 
    Est émis lorsqu'un onglet est déplacé dans une fenêtre.
    
  
    {{WebExtAPIRef("tabs.onRemoved")}}
    
- 
    Est émis lorsqu’un onglet est fermé.
    
+ 
    Est émis lorsqu'un onglet est fermé.
    
  
    {{WebExtAPIRef("tabs.onReplaced")}}
    
- 
    Est émis lorsqu’un onglet est remplacé par un autre onglet en raison d’un prerendering.
    
+ 
    Est émis lorsqu'un onglet est remplacé par un autre onglet en raison d'un prerendering.
    
  
    {{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}
    
- 
    Est émis lorsque l’onglet sélectionné dans une fenêtre change. Déprécié : utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
    
+ 
    Est émis lorsque l'onglet sélectionné dans une fenêtre change. Déprécié : utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place.
    
  
    {{WebExtAPIRef("tabs.onUpdated")}}
    
- 
    Est émis lorsqu’un onglet est mis à jour.
    
+ 
    Est émis lorsqu'un onglet est mis à jour.
    
  
    {{WebExtAPIRef("tabs.onZoomChange")}}
    
  
    Est émis lorsque le zoom dans un onglet est changé.
    
 
    
@@ -186,7 +186,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
 
 
    Remerciements :
 
-
    Cette API est basée sur l’API Chromium chrome.tabs. Cette documentation est dérivée de tabs.json dans le code de Chromium code.
    
+
    Cette API est basée sur l'API Chromium chrome.tabs. Cette documentation est dérivée de tabs.json dans le code de Chromium code.
    
 
 
    Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.
    
 
    
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html
index c8e84968e7..e0820570ab 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.html
@@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts
 
 
 
    
-
    Cette API requiert la présence de la clé user_scripts dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, user_scripts: {}.
    
+
    Cette API requiert la présence de la clé user_scripts dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, user_scripts: {}.
    
 
    
 
 
    Pour utiliser l'API, appelez {{WebExtAPIRef("userScripts.register","register()")}} en passant un objet définissant les scripts à enregistrer. La méthode renvoie une promesse qui est résolue par un objet  {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}.
    
@@ -55,7 +55,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts
 
 
    
  
    {{WebExtAPIRef("userScripts.onBeforeScript")}}
    
- 
    Un événement disponible pour le script API, enregistré dans "user_scripts", qui s'exécute avant qu'un script utilisateur ne s'exécute. Utilisez-le pour déclencher l'exportation des API supplémentaires fournies par le script API, afin qu'elles soient disponibles pour le script utilisateur.
    
+ 
    Un événement disponible pour le script API, enregistré dans "user_scripts", qui s'exécute avant qu'un script utilisateur ne s'exécute. Utilisez-le pour déclencher l'exportation des API supplémentaires fournies par le script API, afin qu'elles soient disponibles pour le script utilisateur.
    
 
    
 
 
    Compatibilité du navigateur
    
@@ -65,6 +65,6 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts
 
    Voir aussi
    
 
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html
index 89800b16d4..19dabab7a6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.html
@@ -37,21 +37,21 @@ await registeredUserScript.unregister();
    
   
    scriptMetadata {{Optional_Inline}}
    
   
    Un objet JSON qui contient certaines propriétés de métadonnées associées aux userScripts enregistrés
    
   
    allFrames {{Optional_Inline}}
    
-  
    Identiques à all_frames dans la clé user_scripts.
    
+  
    Identiques à all_frames dans la clé user_scripts.
    
   
    excludeGlobs {{Optional_Inline}}
    
-  
    Identique à exclude_globs dans la clé user_scripts.
    
+  
    Identique à exclude_globs dans la clé user_scripts.
    
   
    excludeMatches {{Optional_Inline}}
    
-  
    Identique à exclude_matches dans la clé user_scripts.
    
+  
    Identique à exclude_matches dans la clé user_scripts.
    
   
    includeGlobs {{Optional_Inline}}
    
-  
    Identique à include_globs dans la clé user_scripts.
    
+  
    Identique à include_globs dans la clé user_scripts.
    
   
    js {{Optional_Inline}}
    
   
    Un tableau d'objets. Chaque objet a soit une propriété nommée file, qui est une URL commençant par le fichier manifest.json de l'extension et pointant vers un fichier JavaScript à enregistrer, soit une propriété nommée code, qui est un code JavaScript à enregistrer.
    
   
    matchAboutBlank {{Optional_Inline}}
    
-  
    Identique à match_about_blank dans la clé user_scripts.
    
+  
    Identique à match_about_blank dans la clé user_scripts.
    
   
    matches
    
-  
    Identique à matches dans la clé user_scripts.
    
+  
    Identique à matches dans la clé user_scripts.
    
   
    runAt {{Optional_Inline}}
    
-  
    Identique àrun_at dans la clé user_scripts.
    
+  
    Identique àrun_at dans la clé user_scripts.
    
  
  
 
diff --git a/files/fr/mozilla/add-ons/webextensions/index.html b/files/fr/mozilla/add-ons/webextensions/index.html
index ff9e2748b2..6173a4c43b 100644
--- a/files/fr/mozilla/add-ons/webextensions/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/index.html
@@ -11,12 +11,10 @@ translation_of: Mozilla/Add-ons/WebExtensions
 
 
    Les extensions, ou modules complémentaires, peuvent étendre et modifier les fonctionnalités d'un navigateur. Les extensions Firefox sont construites en utilisant la technologie de compatibilité multi-navigateurs de l'API WebExtensions.
    
 
-
    La technologie d'extensions Firefox est, en grande partie, compatible avec l'API d'extension supportée par les navigateurs Chromium tels que Google Chrome, Microsoft Edge et Opera. Dans la plupart des cas, les extensions écrites dans ces navigateurs fonctionnent sur Firefox avec seulement quelques modifications.
    
+
    La technologie d'extensions Firefox est, en grande partie, compatible avec l'API d'extension supportée par les navigateurs Chromium tels que Google Chrome, Microsoft Edge et Opera. Dans la plupart des cas, les extensions écrites dans ces navigateurs fonctionnent sur Firefox avec seulement quelques modifications.
    
 
-
    
 
-
    -

    Références

    JavaScript APIs

    @@ -69,12 +63,3 @@ translation_of: Mozilla/Add-ons/WebExtensions

    Clés de Manifest

    Obtenez tous les détails sur les clés du manifeste, y compris toutes leurs propriétés et paramètres. Vous y trouverez également des informations détaillées sur la compatibilité de chaque clé avec les principaux navigateurs

    -
    -
    - - - diff --git a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html index e4c938f580..91ec000ec5 100644 --- a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html +++ b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.html @@ -7,20 +7,20 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging ---
    {{AddonSidebar}}
    -

    Native messaging permet à une extension d’échanger des messages avec une application native installée sur l’ordinateur de l’utilisateur. Ceci permet que des applications natives puissent fournir un service à des extensions sans avoir besoin d'être atteignables via internet. Un exemple typique est le gestionnaire de mots de passe : l’application native s’occupe du stockage et du chiffrement des mots de passe et communique avec l’extension afin de remplir les formulaires web. Native messaging permet aussi aux extensions d’accéder à des ressources qui ne sont pas accessibles via les API WebExtension, par exemple le matériel hardware particulier.

    +

    Native messaging permet à une extension d'échanger des messages avec une application native installée sur l'ordinateur de l'utilisateur. Ceci permet que des applications natives puissent fournir un service à des extensions sans avoir besoin d'être atteignables via internet. Un exemple typique est le gestionnaire de mots de passe : l'application native s'occupe du stockage et du chiffrement des mots de passe et communique avec l'extension afin de remplir les formulaires web. Native messaging permet aussi aux extensions d'accéder à des ressources qui ne sont pas accessibles via les API WebExtension, par exemple le matériel hardware particulier.

    -

    L’application native n’est pas installée ou gérée par le navigateur : elle est installée à l’aide du système d’installation du système d’exploitation sous‐jacent. En plus de l’application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d’application » (app manifest) et l’installer dans un emplacement défini sur l’ordinateur de l’utilisateur. Le fichier manifest de l’application décrit comment le navigateur peut se connecter à l’application native.

    +

    L'application native n'est pas installée ou gérée par le navigateur : elle est installée à l'aide du système d'installation du système d'exploitation sous‐jacent. En plus de l'application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d'application » (app manifest) et l'installer dans un emplacement défini sur l'ordinateur de l'utilisateur. Le fichier manifest de l'application décrit comment le navigateur peut se connecter à l'application native.

    -

    L’extension doit demander l'autorisation « nativeMessaging » dans son fichier manifest.json. À l’inverse, l’application native doit accorder l’autorisation à l’extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l’application.

    +

    L'extension doit demander l'autorisation « nativeMessaging » dans son fichier manifest.json. À l'inverse, l'application native doit accorder l'autorisation à l'extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l'application.

    -

    Par la suite, l’extension pourra échanger des messages en JSON avec l’application native en utilisant une série de fonctions de l’API {{WebExtAPIRef("runtime")}}. Du côté de l’application native, les messages seront reçus en utilisant l’entrée standard (stdin, standard input) et envoyés en utilisant la sortie standard (stdout, standard output).

    +

    Par la suite, l'extension pourra échanger des messages en JSON avec l'application native en utilisant une série de fonctions de l'API {{WebExtAPIRef("runtime")}}. Du côté de l'application native, les messages seront reçus en utilisant l'entrée standard (stdin, standard input) et envoyés en utilisant la sortie standard (stdout, standard output).

    -

    +

    -

    Le support de native messaging dans les extensions est généralement compatible avec Chrome, avec deux grandes différences :

    +

    Le support de native messaging dans les extensions est généralement compatible avec Chrome, avec deux grandes différences :

      -
    • La liste allowed_extensions du manifest de l’application est un tableau d’ID d’applications, tandis que Chrome liste allowed_origins, sous la forme d'un tableau d'URL "chrome-extension".
      • +
    • La liste allowed_extensions du manifest de l'application est un tableau d'ID d'applications, tandis que Chrome liste allowed_origins, sous la forme d'un tableau d'URL "chrome-extension".
    • Le manifeste de l'application est stocké dans un emplacement différent comparé à Chrome.
    @@ -28,13 +28,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging

    Mise en œuvre

    -

    Le manifest de l’extension (Extension manifest)

    +

    Le manifest de l'extension (Extension manifest)

    -

    Si vous souhaitez que votre extension puisse communiquer avec une application native, alors :

    +

    Si vous souhaitez que votre extension puisse communiquer avec une application native, alors :

      -
    • Vous devez ajouter la permission dans son fichier manifest.json.
      • -
    • Vous devriez probablement spécifier explicitement l’id de votre add‐on, en utilisant la clé de manifest des applications ( Parce que le manifest de l’application identifiera le jeu d’extensions qui sont autorisées à se connecter à celle-ci via la liste de leur ID).
      • +
    • Vous devez ajouter la permission dans son fichier manifest.json.
      • +
    • Vous devriez probablement spécifier explicitement l'id de votre add‐on, en utilisant la clé de manifest des applications ( Parce que le manifest de l'application identifiera le jeu d'extensions qui sont autorisées à se connecter à celle-ci via la liste de leur ID).

    Voici un exemple de fichier « manifest.json » :

    @@ -68,28 +68,28 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging } -

    Le manifest de l’application (App manifest)

    +

    Le manifest de l'application (App manifest)

    -

    Le manifest de l’application décrit au navigateur la manière avec laquelle il peut se connecter à l’application native.

    +

    Le manifest de l'application décrit au navigateur la manière avec laquelle il peut se connecter à l'application native.

    Le fichier manifest de l'application doit être installé avec l'application native. C'est-à-dire que le navigateur lit et valide les fichiers de manifeste des applications mais ne les installe ni ne les gère. Ainsi, le modèle de sécurité pour savoir quand et comment ces fichiers sont installés et mis à jour ressemble beaucoup plus à celui des applications natives que celui des extensions utilisant les API WebExtension.

    -

    Pour plus de détails sur la syntaxe et l'emplacement du manifeste des applications natives, voir manifest natifs.

    +

    Pour plus de détails sur la syntaxe et l'emplacement du manifeste des applications natives, voir manifest natifs.

    Par exemple, voici un manifeste pour l'application native "ping_pong" :

    -
    {
-  "name": "ping_pong",
-  "description": "Example host for native messaging",
-  "path": "/path/to/native-messaging/app/ping_pong.py",
-  "type": "stdio",
-  "allowed_extensions": [ "ping_pong@example.org" ]
-}
    +
    {
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "/path/to/native-messaging/app/ping_pong.py",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
    -

    Ceci autorise l’application dont l’ID est « ping_pong@example.org » à se connecter, en passant le nom « ping_pong » comme paramètre à la fonction de l’API {{WebExtAPIRef("runtime")}} concernée. L’application, elle‐même se trouve dans le fichier « /path/to/native‐messaging/app/ping_pong.py ».

    +

    Ceci autorise l'application dont l'ID est « ping_pong@example.org » à se connecter, en passant le nom « ping_pong » comme paramètre à la fonction de l'API {{WebExtAPIRef("runtime")}} concernée. L'application, elle‐même se trouve dans le fichier « /path/to/native‐messaging/app/ping_pong.py ».

    -

    Remarque pour Windows: dans l’exemple ci‐dessus, l’application native est un script Python. Il peut être compliqué d’amener Windows à faire fonctionner correctement des scripts Python, une méthode alternative est de fournir un fichier .bat, et de l’indiquer dans le manifest :

    +

    Remarque pour Windows: dans l'exemple ci‐dessus, l'application native est un script Python. Il peut être compliqué d'amener Windows à faire fonctionner correctement des scripts Python, une méthode alternative est de fournir un fichier .bat, et de l'indiquer dans le manifest :

    {
   "name": "ping_pong",
@@ -99,32 +99,32 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging
   "allowed_extensions": [ "ping_pong@example.org" ]
 }
    -

    Le fichier batch invoquera alors le script Python :

    +

    Le fichier batch invoquera alors le script Python :

    @echo off
 
 python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"
    -

    Opérations d’échange des  messages

    +

    Opérations d'échange des messages

    Ayant appliqué la configuration de ci‐dessus, une extension peut échanger des messages JSON avec une application native.

    -

    Du côté de l’extension

    +

    Du côté de l'extension

    -

    La messagerie native ne peut pas être utilisée directement dans les scripts de contenu ; vous devrez le faire indirect via des scripts d'arrière plan.

    +

    La messagerie native ne peut pas être utilisée directement dans les scripts de contenu ; vous devrez le faire indirect via des scripts d'arrière plan.

    Il y a deux modèles à utiliser ici : la messagerie basée sur la connexion et la messagerie sans connexion.

    Messagerie basée sur une connexion

    -

    Avec cette manière de faire, vous appelez la fonction {{WebExtAPIRef("runtime.connectNative()")}}, en lui passant comme paramètre le nom de l’application (la valeur de la propriété "name" du manifest de l’application). Ceci lance l’application si elle n’est pas encore démarrée et renverra un objet  {{WebExtAPIRef("runtime.Port")}} à l’extension.

    +

    Avec cette manière de faire, vous appelez la fonction {{WebExtAPIRef("runtime.connectNative()")}}, en lui passant comme paramètre le nom de l'application (la valeur de la propriété "name" du manifest de l'application). Ceci lance l'application si elle n'est pas encore démarrée et renverra un objet {{WebExtAPIRef("runtime.Port")}} à l'extension.

    -

    L’application native passe deux arguments lorsqu’elle démarre :

    +

    L'application native passe deux arguments lorsqu'elle démarre :

      -
    • le chemin complet du manifest de l’application
      • -
    • (nouveau dans Firefox 55) l'ID (tel qu'indiqué dans la clé du manifest.json de  browser_specific_settings) of the add-on that started it.
      • +
    • le chemin complet du manifest de l'application
      • +
    • (nouveau dans Firefox 55) l'ID (tel qu'indiqué dans la clé du manifest.json de browser_specific_settings) of the add-on that started it.
    @@ -136,11 +136,11 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"
    -

    L’aplication continue de fonctionner jusqu’à ce que l’extension invoque Port.disconnect() ou jusqu'à ce que la page connectée soit fermée.

    +

    L'aplication continue de fonctionner jusqu'à ce que l'extension invoque Port.disconnect() ou jusqu'à ce que la page connectée soit fermée.

    Pour envoyer des messages en utilisant Port, utilisez sa fonction postMessage(), en passant le message JSON à envoyer. Pour écouter les messages en utilisant Port, ajouter un écouteur (listener) en utilisant sa fonction onMessage.addListener().

    -

    Voici un exemple de script « background » qui établit une connection avec l’application « ping_pong », qui écoute à l’attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l’utilisateur clique sur l’action du navigateur (browser action) :

    +

    Voici un exemple de script « background » qui établit une connection avec l'application « ping_pong », qui écoute à l'attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l'utilisateur clique sur l'action du navigateur (browser action) :

    /*
 On startup, connect to the "ping_pong" app.
@@ -164,24 +164,24 @@ browser.browserAction.onClicked.addListener(() => {
 
 
    Messagerie sans connexion
    
 
-
    Avec cette manière de faire, vous invoquez la fonction  {{WebExtAPIRef("runtime.sendNativeMessage()")}}, en lui passant comme arguments :
    
+
    Avec cette manière de faire, vous invoquez la fonction {{WebExtAPIRef("runtime.sendNativeMessage()")}}, en lui passant comme arguments :
    
 
 
      
- 
    • le nom de l’application,
      • 
+ 
    • le nom de l'application,
      • 
  
    • le message JSON à envoyer,
      • 
  
    • et optionnellement un callback.
      • 
 
    
 
-
    Une nouvelle instance de l’application sera créée pour chaque message. L’application native passe deux arguments lorsqu’elle démarre :
    
+
    Une nouvelle instance de l'application sera créée pour chaque message. L'application native passe deux arguments lorsqu'elle démarre :
    
 
 
      
- 
    • le chemin complet du manifest de l’application
      • 
- 
    • (nouveau dans Firefox 55), l’ID (tel qu'indiqué dans la clé du manifest.json de browser_specific_settings) de l’add‐on qui l’a démarré.
      • 
+ 
    • le chemin complet du manifest de l'application
      • 
+ 
    • (nouveau dans Firefox 55), l'ID (tel qu'indiqué dans la clé du manifest.json de browser_specific_settings) de l'add‐on qui l'a démarré.
      • 
 
    
 
-
    Le premier message envoyé par l’application est traité comme une réponse à l’invocation de la fonction sendNativeMessage(), et sera passé dans le callback.
    
+
    Le premier message envoyé par l'application est traité comme une réponse à l'invocation de la fonction sendNativeMessage(), et sera passé dans le callback.
    
 
-
    Voici l’exemple précédent réécrit en utilisant runtime.sendNativeMessage():
    
+
    Voici l'exemple précédent réécrit en utilisant runtime.sendNativeMessage():
    
 
 
    function onResponse(response) {
   console.log("Received " + response);
@@ -203,13 +203,13 @@ browser.browserAction.onClicked.addListener(() => {
 });
 
    
 
-
    Du côté de l’application
    
+
    Du côté de l'application
    
 
-
    Du côté de l’application, vous utilisez l’entrée standard (standard input) pour recevoir les messages, et la sortie standard (standard output) pour les envoyer.
    
+
    Du côté de l'application, vous utilisez l'entrée standard (standard input) pour recevoir les messages, et la sortie standard (standard output) pour les envoyer.
    
 
-
    Chaque message est sérialisé sous forme de JSON, est encodé en UTF‐8 et est précédé d’une valeur 32 bits qui contient la longueur du message dans l’ordre des octets natifs.
    
+
    Chaque message est sérialisé sous forme de JSON, est encodé en UTF‐8 et est précédé d'une valeur 32 bits qui contient la longueur du message dans l'ordre des octets natifs.
    
 
-
    La taille maximum d’un seul message envoyé par l’application est de 1MB. La taille maximum d’un message envoyé vers l’application est de 4GB.
    
+
    La taille maximum d'un seul message envoyé par l'application est de 1MB. La taille maximum d'un message envoyé vers l'application est de 4GB.
    
 
 
    Voici un exemple écrit en Python. Il écoute les messages de l'extension. Notez que le fichier doit être exécutable sous Linux. Si le message est "ping", il répond par un message "pong". C'est la version Python 2 :
    
 
@@ -255,7 +255,7 @@ while True:
 
 
    En Python 3, les données binaires reçues doivent être décodées en une chaîne. Le contenu à renvoyer à l'addon doit être encodé en données binaires à l'aide d'une structure :
    
 
-
    #!/usr/bin/python -u
+
    #!/usr/bin/python -u
 
 # Note that running python with the `-u` flag is required on Windows,
 # in order to ensure that stdin and stdout are opened in binary, rather
@@ -295,74 +295,74 @@ def send_message(encoded_message):
 while True:
     message = get_message()
     if message == "ping":
-        send_message(encode_message("pong"))
    
+        send_message(encode_message("pong"))
    
 
-
    Fermeture de l’application native
    
+
    Fermeture de l'application native
    
 
-
    Si vous vous êtes connecté à l’application native en utilisant  runtime.connectNative(), alors elle continuera de fonctionner jusqu’à ce que l’extension appelle Port.disconnect() ou que la page qui s'y est connectée soit fermée. Si vous avez démarré l’application native en utilisant runtime.sendNativeMessage(), alors elle sera fermée après qu’elle aura reçu le message et envoyé une réponse.
    
+
    Si vous vous êtes connecté à l'application native en utilisant runtime.connectNative(), alors elle continuera de fonctionner jusqu'à ce que l'extension appelle Port.disconnect() ou que la page qui s'y est connectée soit fermée. Si vous avez démarré l'application native en utilisant runtime.sendNativeMessage(), alors elle sera fermée après qu'elle aura reçu le message et envoyé une réponse.
    
 
-
    Pour fermer l’application native :
    
+
    Pour fermer l'application native :
    
 
 
      
- 
    • Sur les système d’exploitation *.nix comme Linux ou OS X, le navigateur envoie un SIGTERM à l’application native, puis un SIGKILL après que l’application ait eût l’occasion de finir de manière normale. Ces signaux sont propagés à tout sous‐processus sauf pour ceux qui se trouvent dans de nouveaux groupes de processus.
      • 
- 
    • Sous windows, le navigateur met le processus de l’application native dans un Job object et tue le processus. Si l’application native lance un autre processus et désire qu’il reste ouvert après que l’application native elle même soit fermée alors l’application native doit démarrer un autre processus avec le paramètre CREATE_BREAKAWAY_FROM_JOB.
      • 
+ 
    • Sur les système d'exploitation *.nix comme Linux ou OS X, le navigateur envoie un SIGTERM à l'application native, puis un SIGKILL après que l'application ait eût l'occasion de finir de manière normale. Ces signaux sont propagés à tout sous‐processus sauf pour ceux qui se trouvent dans de nouveaux groupes de processus.
      • 
+ 
    • Sous windows, le navigateur met le processus de l'application native dans un Job object et tue le processus. Si l'application native lance un autre processus et désire qu'il reste ouvert après que l'application native elle même soit fermée alors l'application native doit démarrer un autre processus avec le paramètre CREATE_BREAKAWAY_FROM_JOB.
      • 
 
    
 
 
    Dépannage
    
 
-
    Si quelque chose se passe mal, vérifier dans la console du navigateur. Si l’application native renvoit quelque‐chose vers stderr (strandard error), le navigateur le renverra vers la console du navigateur. Donc si vous avez réussi à lancer l’application native, vous verrez toutes les messages d’erreurs qu’elle émet.
    
+
    Si quelque chose se passe mal, vérifier dans la console du navigateur. Si l'application native renvoit quelque‐chose vers stderr (strandard error), le navigateur le renverra vers la console du navigateur. Donc si vous avez réussi à lancer l'application native, vous verrez toutes les messages d'erreurs qu'elle émet.
    
 
-
    Si vous n’avez pas réussi à démarrer l’application, vous devriez voir un message d’erreur vous donnant un indice sur le problème.
    
+
    Si vous n'avez pas réussi à démarrer l'application, vous devriez voir un message d'erreur vous donnant un indice sur le problème.
    
 
 
    "No such native application <name>"
    
 
 
      
- 
    •  Vérifiez que le nom passé comme argument à la fonction runtime.connectNative() correspond au nom dans le manifest de l’application
      • 
- 
    • OS X / Linux : vérifiez que le nom du fichier de manifest de l’application est  <name>.json.
      • 
- 
    • Windows : vérifiez que la clé de registre est dans l’endroit correcte, et que son nom correspond au « name » dans le manifest de l’application.
      • 
- 
    • Windows : vérifiez que le chemin donné dans la clé de registre pointe vers le manifest de l’application.
      • 
+ 
    • Vérifiez que le nom passé comme argument à la fonction runtime.connectNative() correspond au nom dans le manifest de l'application
      • 
+ 
    • OS X / Linux : vérifiez que le nom du fichier de manifest de l'application est <name>.json.
      • 
+ 
    • Windows : vérifiez que la clé de registre est dans l'endroit correcte, et que son nom correspond au « name » dans le manifest de l'application.
      • 
+ 
    • Windows : vérifiez que le chemin donné dans la clé de registre pointe vers le manifest de l'application.
      • 
 
    
 
 
    "Error: Invalid application <name>"
    
 
 
      
- 
    • Vérifier que le nom de l’application ne contient pas de caractères invalides.
      • 
+ 
    • Vérifier que le nom de l'application ne contient pas de caractères invalides.
      • 
 
    
 
 
    "'python' is not recognized as an internal or external command, ..."
    
 
 
      
- 
    • Windows : Si votre application est un script écrit en Python, vérifiez que Python est installé et que vous avez un chemin définit pour lui.
      • 
+ 
    • Windows : Si votre application est un script écrit en Python, vérifiez que Python est installé et que vous avez un chemin définit pour lui.
      • 
 
    
 
 
    "File at path <path> does not exist, or is not executable"
    
 
 
      
- 
    • Si vous voyez ce message, alors le fichier de manifest de l’application a été trouvé.
      • 
- 
    • Vérifier que le « chemin » dans le manifest de l’application est correct.
      • 
- 
    • Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\path\\to\\file").
      • 
- 
    • Vérifiez que l’application se trouve bien à l’endroit indiqué par la propriété « path » dans le manifest de l’application.
      • 
- 
    • Vérifiez que l’application est exécutable.
      • 
+ 
    • Si vous voyez ce message, alors le fichier de manifest de l'application a été trouvé.
      • 
+ 
    • Vérifier que le « chemin » dans le manifest de l'application est correct.
      • 
+ 
    • Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\path\\to\\file").
      • 
+ 
    • Vérifiez que l'application se trouve bien à l'endroit indiqué par la propriété « path » dans le manifest de l'application.
      • 
+ 
    • Vérifiez que l'application est exécutable.
      • 
 
    
 
 
    "This extension does not have permission to use native application <name>"
    
 
 
      
- 
    • Vérifier que le tableau  « allowed_extensions » dans le manifest de l’application contient l’ID de l’add‐on.
      • 
+ 
    • Vérifier que le tableau « allowed_extensions » dans le manifest de l'application contient l'ID de l'add‐on.
      • 
 
    
 
 
    "TypeError: browser.runtime.connectNative is not a function"
    
 
 
      
- 
    • Vérifiez que l’extension à la permission « nativeMessaging »
      • 
+ 
    • Vérifiez que l'extension à la permission « nativeMessaging »
      • 
 
    
 
-
    "[object Object]       NativeMessaging.jsm:218"
    
+
    "[object Object] NativeMessaging.jsm:218"
    
 
 
      
- 
    • Il y a eu un problème lors du démarrage de l’application.
      • 
+ 
    • Il y a eu un problème lors du démarrage de l'application.
      • 
 
    
 
-
    Incompatibilités avec Chrome
    
+
    Incompatibilités avec Chrome
    
 
-
    {{Page("Mozilla / Add‐ons / WebExtensions / Chrome_incompatibilities", "Native_messaging")}}
    
+
    Il existe un certain nombre de différences entre les navigateurs qui affectent la messagerie native dans les extensions web, notamment les arguments transmis à l'app native, l'emplacement du fichier manifeste, etc. Ces différences sont abordées dans Incompatibilités Chrome > Messagerie native.
    
diff --git a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html
index 121fe18d09..eec74b2a28 100644
--- a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html
@@ -56,8 +56,8 @@ original_slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite
  
  • En savoir plus sur les concepts fondamentaux des extensions de navigateur, en commençant par les détails sur l'utilisation des APIs Javascript.
    • 
  
  • Un guide des composants de l'interface utilisateur disponibles pour les extensions de votre navigateur.
    • 
  
  • Une collection de guides pratiques sur la réalisation des tâches clés dans vos extensions ou l'utilisation des API JavaScript.
    • 
- 
  • Un guide de référence complet sur les APIs JavaScript.
    • 
- 
  • Un guide de référence complet sur les clés du manifeste.
    • 
+ 
  • Un guide de référence complet sur les APIs JavaScript.
    • 
+ 
  • Un guide de référence complet sur les clés du manifeste.
    • 
 
 
 
    Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :
    
diff --git a/files/fr/mozilla/firefox/releases/77/index.html b/files/fr/mozilla/firefox/releases/77/index.html
index e0cde338a0..5520236f82 100644
--- a/files/fr/mozilla/firefox/releases/77/index.html
+++ b/files/fr/mozilla/firefox/releases/77/index.html
@@ -96,7 +96,7 @@ original_slug: Mozilla/Firefox/Versions/77
 
    Changements manifestes
    
 
 
      
- 
    • Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste optional_permissions et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : browsingData ({{bug(1630417)}}), pkcs11 ({{bug(1630418)}}), proxy ({{bug(1548011)}}), et sessions ({{bug(1630414)}}).
      • 
+ 
    • Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste optional_permissions et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : browsingData ({{bug(1630417)}}), pkcs11 ({{bug(1630418)}}), proxy ({{bug(1548011)}}), et sessions ({{bug(1630414)}}).
      • 
 
    
 
 
    Suppressions
    
diff --git a/files/fr/orphaned/web/api/navigatoronline/online/index.html b/files/fr/orphaned/web/api/navigatoronline/online/index.html
index 07dbaef7a9..fe5c16d221 100644
--- a/files/fr/orphaned/web/api/navigatoronline/online/index.html
+++ b/files/fr/orphaned/web/api/navigatoronline/online/index.html
@@ -45,7 +45,7 @@ original_slug: Web/API/NavigatorOnLine/onLine
 
 
    Si le navigateur ne prend pas en charge navigator.onLine, l'exemple ci-dessus apparaîtra toujours comme false / undefined.
    
 
-
    Pour voir les modifications de l'état du réseau, utilisez addEventListener pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:
    
+
    Pour voir les modifications de l'état du réseau, utilisez addEventListener pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:
    
 
 
    window.addEventListener('offline', function(e) { ... })
 window.addEventListener('offline', (e) => { ... })
@@ -79,7 +79,7 @@ window.addEventListener('online', (e) => { ... })
 
 
    Notes
    
 
-
    Voir Événements en ligne / hors ligne pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.
    
+
    Voir Événements en ligne / hors ligne pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.
    
 
 
    Voir également
    
 
diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html
index 50879047a1..1ac35c878b 100644
--- a/files/fr/tools/accessibility_inspector/simulation/index.html
+++ b/files/fr/tools/accessibility_inspector/simulation/index.html
@@ -12,7 +12,9 @@ tags:
 translation_of: Tools/Accessibility_inspector/Simulation
 original_slug: Outils/Inspecteur_accessibilite/Simulation
 ---
-
    Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.
    
+
    {{ToolsSidebar}}
    
+
+
    Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.
    
 
 
    La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.
    
 
@@ -51,35 +53,35 @@ original_slug: Outils/Inspecteur_accessibilite/Simulation
  
   
    Aucun
-   Colorful image of a cat's face, without modification
+   Colorful image of a cat's face, without modification
   
   
    Protanomalie (rouge faible)
-   Colorful image of a cat's face, with deuteranomaly simulation
+   Colorful image of a cat's face, with deuteranomaly simulation
   
   
    Deutéranomalie (vert faible)
-   Colorful image of a cat's face, with deuteranomaly simulation
+   Colorful image of a cat's face, with deuteranomaly simulation
   
   
    Tritanomalie (bleu faible)
-   Colorful image of a cat's face, with tritanomaly simulation
+   Colorful image of a cat's face, with tritanomaly simulation
   
   
    Protanopie (pas de rouge)
-   Colorful image of a cat's face, with protanopia simulation
+   Colorful image of a cat's face, with protanopia simulation
   
   
    Deutéranopie (pas de vert)
-   Colorful image of a cat's face, with deuteranopia simulation
+   Colorful image of a cat's face, with deuteranopia simulation
   
   
    Tritanopie (pas de bleu)
-   Colorful image of a cat's face, with tritanopia simulation
+   Colorful image of a cat's face, with tritanopia simulation
   
   
    Perte de contraste
-   Colorful image of a cat's face, with contrast loss simulation
+   Colorful image of a cat's face, with contrast loss simulation
   
  
 
diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
index 8b3578c121..32d2c8465d 100644
--- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
+++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
@@ -10,7 +10,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_
 ---
 
    Le contraste de la couleur entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.
    
 
-
    Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:
    
+
    Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:
    
 
 
@@ -32,24 +32,24 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_
    
-   
+   
    
  
    4.5 : 1
   
    
   
    Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiquesComposants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques
    3 : 1
    Non défini
   
    
  
 
    
 
-
    Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.
    
+
    Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.
    
 
 
    Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.
    
 
-
    Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.
    
+
    Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.
    
 
-
    C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.
    
+
    C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.
    
 
 
    Exemples
    
 
-
    Jetons un coup d'œil à du code HTML et CSS assez simple:
    
+
    Jetons un coup d'œil à du code HTML et CSS assez simple:
    
 
 
    <div class="bon">Bon contraste</div>
 <div class="mauvais">Mauvais contraste</div>
    
@@ -66,7 +66,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_
   background-color: #400064;
 }
    
 
-
    Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:
    
+
    Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:
    -

    Consultez la page de référence de la console pour plus d'exemples.

    +

    Consultez la page de référence de la console pour plus d'exemples.

    Spécifications

    @@ -69,6 +69,6 @@ console.log(myString)
    • Outils
      • -
    • Console Web - comment la console Web de Firefox traite les appels de l'API Console.
      • -
    • Débogage à distance - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.
      • +
    • Console Web - comment la console Web de Firefox traite les appels de l'API Console.
      • +
    • Débogage à distance - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.
    diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html index 664fd5b1eb..a33909ef06 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -2,26 +2,30 @@ title: Introduction slug: Web/API/Document_Object_Model/Introduction tags: + - Beginner - DOM + - Document - Guide - - Reference + - HTML DOM + - Introduction + - Tutorial translation_of: Web/API/Document_Object_Model/Introduction --- -

    Le Modèle Objet de Document (DOM: Document object Model) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document  {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.

    +
    {{DefaultAPISidebar("DOM")}}
    -

    NDTR: (Cette section consiste en une brève introduction conceptuelle du DOM : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents HTML et XML, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).

    +

    Le Modèle Objet de Document (DOM: Document object Model) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.

    -

    Qu'est-ce que le DOM?

    +

    Qu'est-ce que le DOM?

    Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

    Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.

    -

    Les normes DOM du W3C et WHATWG DOM forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.

    +

    Les normes DOM du W3C et WHATWG DOM forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.

    -

    Par exemple, DOM du W3C spécifie que la méthode getElementsByTagName dans le code ci-dessous doit renvoyer une liste de tous les éléments <P> présents dans le document :

    +

    Par exemple, DOM du W3C spécifie que la méthode getElementsByTagName dans le code ci-dessous doit renvoyer une liste de tous les éléments <P> présents dans le document :

    -
    paragraphes = document.getElementsByTagName("P");
+
    const paragraphs = document.querySelectorAll("p");
 // paragraphes[0] est le premier élément <p>
 // paragraphes[1] est le second élément <p>, etc.
 alert(paragraphes[0].nodeName);
@@ -29,63 +33,62 @@ alert(paragraphes[0].nodeName);
 
 
    Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet document qui représente le document lui-même, l'objet table qui implémente l'interface DOM particulière HTMLTableElement permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.
    
 
-
    DOM et JavaScript
    
+
    DOM et JavaScript
    
 
-
    Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en JavaScript. C'est-à-dire qu'il est écrit en JavaScript, mais qu'il utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.
    
+
    Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en JavaScript. C'est-à-dire qu'il est écrit en JavaScript, mais qu'il utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.
    
 
-
    À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :
    
+
    À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :
    
 
 
    API(page Web ou XML) = DOM + JS(langage de script)
    
 
-
    Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :
    
+
    Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :
    
 
-
    # Exemple d'utilisation du DOM en Python
+
    # Exemple d'utilisation du DOM en Python
 import xml.dom.minidom as m
 doc = m.parse("C:\\Projects\\Py\\chap1.xml");
 doc.nodeName # Propriété DOM de l'objet document;
 p_list = doc.getElementsByTagName("para");
 
    
 
-
    Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.
    
+
    Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.
    
 
-
    Méthodes d'accès au DOM
    
+
    Méthodes d'accès au DOM
    
 
 
    Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.
    
 
-
    Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <SCRIPT> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments document ou window, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction alert() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.
    
+
    Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <SCRIPT> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments document ou window, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction alert() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.
    
 
 
    Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).
    
 
-
    <body
-  onload="window.alert('Bienvenue sur ma page Web !');">
+
    <body onload="window.alert('Bienvenue sur ma page Web !');">
    
+
+
    Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :
    
+
+
    <html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Gros titre !");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
 
    
 
-
    Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :
    
-
-
    <html>
-  <head>
-    <script>
-       //exécute la fonction lorsque le document est chargé
-       window.onload = function() {
-
-         // crée  un couple d'éléments dans une page HTML autrement vide
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
    
-
-
    Types de données fondamentaux
    
+
    Types de données fondamentaux
    
 
 
    Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.
    
 
 
    
-
    Note: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN  fera souvent la même chose, à cause de la fréquence de cette hypothèse.
    
+
    Note: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.
    
 
    
 
 
    NDTR: (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant elements, aux tableaux de nœuds en tant que nodeLists (ou même simplement éléments), et aux nœuds d'attributs en tant qu'attributes).
    
@@ -102,19 +105,19 @@ p_list = doc.getElementsByTagName("para");
  
   
    {{domxref("Document")}}
-   Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
+   Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
   
   
    {{domxref("Node")}}
-   Chaque objet  du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi  un nœud text ou nœud attribut.
+   Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.
   
   
    {{domxref("Element")}}
-   Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode document.createElement() renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM  {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques  ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
+   Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode document.createElement() renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
   
   
    {{domxref("NodeList")}}
-   Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes :
+   Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes :
     
      
      
    • list.item(1)
      • 
      
    • list[1]
      • 
@@ -134,36 +137,36 @@ p_list = doc.getElementsByTagName("para");
  
 
 
-
      Les interfaces DOM
      
+
      Les interfaces DOM
      
 
 
      Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont leschoses réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément HTML FORM reçoit sa propriété name de l'interface HTMLElement. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.
      
 
 
      Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.
      
 
-
      Les interfaces et les objets
      
+
      Les interfaces et les objets
      
 
-
      De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une interface spécialisée de l'élément HTML Table, qui comprend des méthodes telles que createCaption et insertRow. Mais comme il s'agit également d'un élément HTML, table implémente aussi l'interface Element décrite dans le chapitre Référence de DOM element. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique Node, dont dérive Element.
      
+
      De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une interface spécialisée de l'élément HTML Table, qui comprend des méthodes telles que createCaption et insertRow. Mais comme il s'agit également d'un élément HTML, table implémente aussi l'interface Element décrite dans le chapitre Référence de DOM element. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique Node, dont dérive Element.
      
 
 
      Lorsque vous obtiendrez une référence à un objet table, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.
      
 
-
      var table = document.getElementById("table");
+
      var table = document.getElementById("table");
 var tableAttrs = table.attributes; // Interface Node/Element
 for(var i = 0; i < tableAttrs.length; i++){
-  // Interface HTMLTableElement : attribut border
+  // Interface HTMLTableElement : attribut border
   if(tableAttrs[i].nodeName.toLowerCase() == "border")
     table.border = "1";
 }
-// Interface HTMLTableElement : attribut summary
-table.summary = "note : bordure plus large";
+// Interface HTMLTableElement : attribut summary
+table.summary = "note : bordure plus large";
 
      
 
-
      Interfaces essentielles du DOM
      
+
      Interfaces essentielles du DOM
      
 
-
      Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM à la fin de livre.
      
+
      Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM à la fin de livre.
      
 
-
      Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente quelque chose comme le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet table donné en exemple dans la section précédente.
      
+
      Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente quelque chose comme le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet table donné en exemple dans la section précédente.
      
 
-
      Ce qui suit est une brève liste des API communes au script de page dans le Web et  XML utilisant le DOM.
      
+
      Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.
      
 
 
        
  
      • {{domxref("document.getElementById", "", "", "1")}}(id)
        • 
@@ -181,9 +184,7 @@ table.summary = "note : bordure plus large";
  
      • {{domxref("window.scrollTo", "", "", "1")}}()
        • 
 
      
 
-
-
-
      Test de l'API DOM
      
+
      Test de l'API DOM
      
 
 
      Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.
      
 
@@ -191,107 +192,51 @@ table.summary = "note : bordure plus large";
 
 
      Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction test(), créer plus de boutons, ou ajouter d'autres éléments si nécessaire.
      
 
-
      <html>
+
      <html>
 <head>
-<title>Tests du DOM</title>
-<script type="application/x-javascript">
-function setBodyAttr(attr,value){
-  if(document.body) eval('document.body.'+attr+'="'+value+'"');
-  else notSupported();
-}
-</script>
+  <title>Tests du DOM</title>
+  <script type="application/x-javascript">
+  function setBodyAttr(attr,value){
+    if(document.body) eval('document.body.'+attr+'="'+value+'"');
+    else notSupported();
+  }
+  </script>
 </head>
 <body>
-<div style="margin: .5in; height="400"">
-<p><b><tt>text</tt> color</p>
-<form>
-<select onChange="setBodyAttr('text',
-    this.options[this.selectedIndex].value);">
-<option value="black">black
-<option value="darkblue">darkblue
-</select>
- <p><b><tt>bgColor</tt></p>
- <select onChange="setBodyAttr('bgColor',
-    this.options[this.selectedIndex].value);">
-<option value="white">white
-<option value="lightgrey">gray
- </select>
-<p><b><tt>link</tt></p>
-<select onChange="setBodyAttr('link',
-     this.options[this.selectedIndex].value);">
-<option value="blue">blue
-<option value="green">green
-</select>  <small>
-     <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-(exemple de lien)</a></small><br>
-</form>
-<form>
-  <input type="button" value="version" onclick="ver()" />
-</form>
-</div>
+  <div style="margin: .5in; height="400"">
+    <p><b><tt>text</tt> color</p>
+    <form>
+      <select onChange="setBodyAttr('text',
+          this.options[this.selectedIndex].value);">
+        <option value="black">black
+        <option value="darkblue">darkblue
+      </select>
+      <p><b><tt>bgColor</tt></p>
+      <select onChange="setBodyAttr('bgColor',
+          this.options[this.selectedIndex].value);">
+        <option value="white">white
+        <option value="lightgrey">gray
+      </select>
+      <p><b><tt>link</tt></p>
+      <select onChange="setBodyAttr('link',
+          this.options[this.selectedIndex].value);">
+        <option value="blue">blue
+        <option value="green">green
+      </select>  <small>
+          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+      (exemple de lien)</a></small><br>
+    </form>
+    <form>
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
 </body>
-</html>
-
      
+</html>
      
 
-
      Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.
      
+
      Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.
      
 
 
      Figure 0.1 Exemple de page de test du DOM
      
 
-
      
-
-
      Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web  accessibles au DOM comme sa couleur de fond (bgColor), la couleur des hyperliens (aLink) et la couleur du texte (text). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.
      
-
-
-
-
+
      
 
-
      
-
      
-
      {{DefaultAPISidebar("DOM")}}
      
-
      
-
      
-
-
-
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
-
      
+
      Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (bgColor), la couleur des hyperliens (aLink) et la couleur du texte (text). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.
      
diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html
index 9c47374845..05f5a2f840 100644
--- a/files/fr/web/api/element/index.html
+++ b/files/fr/web/api/element/index.html
@@ -8,11 +8,12 @@ tags:
   - Interface
   - Reference
   - Web API
+browser-compat: api.Element
 translation_of: Web/API/Element
 ---
-
      {{APIRef("DOM")}}
      
+
      {{APIRef("DOM")}}
      
 
-
      Element est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. Il n'a que des méthodes et des propriétés communes à tous les types d'éléments. Les classes plus spécifiques héritent d'Element. Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG. La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.
      
+
      Element est la classe de base la plus générale à partir de laquelle tous les objets d'un Document héritent. Il n'a que des méthodes et des propriétés communes à tous les types d'éléments. Les classes plus spécifiques héritent d'Element. Par exemple, l'interface HTMLElement est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG. La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.
      
 
 
      Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface XULElement, implémentent également Element.
      
 
@@ -20,198 +21,198 @@ translation_of: Web/API/Element
 
 
      Propriétés
      
 
-
      Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}. Il implémente les propriétés de {{domxref("ParentNode")}},  {{domxref("ChildNode")}},  {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.
      
+
      Hérite des propriétés de son interface parent Node et, par extension, du parent de cette interface EventTarget. Il implémente les propriétés de ParentNode,  ChildNode,  NonDocumentTypeChildNode et Animatable.
      
 
 
      
- 
      {{domxref("Element.attributes")}} {{readOnlyInline}}
      
- 
      Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.
      
- 
      {{domxref("Element.classList")}} {{readOnlyInline}}
      
- 
      Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.
      
- 
      {{domxref("Element.className")}}
      
- 
      est une {{domxref("DOMString")}} représentant la classe de l'élément.
      
- 
      {{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}
      
- 
      Retourne un {{jsxref("Number")}}  représentant la hauteur intérieure de l'élément.
      
- 
      {{domxref("Element.clientLeft")}} {{readOnlyInline}}
      
- 
      Retourne un {{jsxref("Number")}}  représentant la largeur de la bordure gauche de l'élément.
      
- 
      {{domxref("Element.clientTop")}} {{readOnlyInline}}
      
+ 
      Element.attributes {{readOnlyInline}}
      
+ 
      Retourne un objet NamedNodeMap contenant les attributs assignés de l'élément HTML correspondant.
      
+ 
      Element.classList {{readOnlyInline}}
      
+ 
      Retourne une DOMTokenList contenant la liste des attributs de classe.
      
+ 
      Element.className
      
+ 
      est une DOMString représentant la classe de l'élément.
      
+ 
      Element.clientHeight {{experimental_inline}} {{readOnlyInline}}
      
+ 
      Retourne un {{jsxref("Number")}} représentant la hauteur intérieure de l'élément.
      
+ 
      Element.clientLeft {{readOnlyInline}}
      
+ 
      Retourne un {{jsxref("Number")}} représentant la largeur de la bordure gauche de l'élément.
      
+ 
      Element.clientTop {{readOnlyInline}}
      
  
      Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.
      
- 
      {{domxref("Element.clientWidth")}} {{readOnlyInline}}
      
+ 
      Element.clientWidth {{readOnlyInline}}
      
  
      Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.
      
- 
      {{domxref("Element.computedName")}} {{readOnlyInline}}
      
- 
      Retourne une {{domxref("DOMString")}}  contenant l'étiquette affichée pour l'accessibilité.
      
- 
      {{domxref("Element.computedRole")}} {{readOnlyInline}}
      
- 
      Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.
      
- 
      {{domxref("Element.id")}}
      
- 
      est une {{domxref("DOMString")}} représentant l'id (identifiant) de l'élément.
      
- 
      {{domxref("Element.innerHTML")}}
      
- 
      Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.
      
- 
      {{ domxref("Element.localName") }} {{readOnlyInline}}
      
- 
      une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.
      
- 
      {{domxref("Element.namespaceURI")}} {{readonlyInline}}
      
+ 
      Element.computedName {{readOnlyInline}}
      
+ 
      Retourne une DOMString contenant l'étiquette affichée pour l'accessibilité.
      
+ 
      Element.computedRole {{readOnlyInline}}
      
+ 
      Retourne une DOMString contenant le rôle ARIA qui a été appliqué à un élément particulier.
      
+ 
      Element.id
      
+ 
      est une DOMString représentant l'id (identifiant) de l'élément.
      
+ 
      Element.innerHTML
      
+ 
      Est une DOMString représentant la partie locale du nom qualifié de l'élément.
      
+ 
      Element.localName {{readOnlyInline}}
      
+ 
      une DOMString représentant la partie locale du nom qualifié de l'élément.
      
+ 
      Element.namespaceURI {{readonlyInline}}
      
  
      L'URI d'espace de noms de l'élément, ou null s'il n'est pas un espace de noms.
      
 
      
 
 
      
-
      Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms http://www.w3.org/1999/xhtml  dans les arborescences HTML et XML.  {{gecko_minversion_inline("1.9.2")}}
      
+
      Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms http://www.w3.org/1999/xhtml  dans les arborescences HTML et XML.  
      
 
      
 
 
      
- 
      {{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
      
- 
      est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou null s'il n'y a pas de noeud frère.
      
- 
      {{domxref("Element.outerHTML")}}
      
- 
      Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.
      
- 
      {{DOMxRef("Element.part")}}
      
- 
      Représente le ou les identifiants part de l'élément (c'est-à-dire définis en utilisant l'attribut part), retournés dans un {{domxref("DOMTokenList")}}.
      
- 
      {{domxref("Element.prefix")}} {{readOnlyInline}}
      
- 
      Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou null si aucun préfixe n'est spécifié.
      
- 
      {{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
      
- 
      Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou null s'il n'y a pas d'élément frère.
      
- 
      {{domxref("Element.scrollHeight")}} {{readOnlyInline}}
      
+ 
      NonDocumentTypeChildNode.nextElementSibling {{readOnlyInline}}
      
+ 
      est un Element suivant immédiatement dans l'arbre celui donné, ou null s'il n'y a pas de noeud frère.
      
+ 
      Element.outerHTML
      
+ 
      Est une DOMString représentant le balisage de l'élément, y compris son contenu. Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.
      
+ 
      Element.part
      
+ 
      Représente le ou les identifiants part de l'élément (c'est-à-dire définis en utilisant l'attribut part), retournés dans un DOMTokenList.
      
+ 
      Element.prefix {{readOnlyInline}}
      
+ 
      Une DOMString représentant le préfixe de l'espace de noms de l'élément, ou null si aucun préfixe n'est spécifié.
      
+ 
      NonDocumentTypeChildNode.previousElementSibling {{readOnlyInline}}
      
+ 
      Est un Element, celui précédant immédiatement dans l'arbre l'élément donné, ou null s'il n'y a pas d'élément frère.
      
+ 
      Element.scrollHeight {{readOnlyInline}}
      
  
      Retourne un {{jsxref("Number")}} représentant la hauteur de vue de défilement d'un élément.
      
- 
      {{domxref("Element.scrollLeft")}}
      
+ 
      Element.scrollLeft
      
  
      Est un {{jsxref("Number")}} représentant le décalage de défilement gauche de l'élément.
      
- 
      {{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}
      
- 
      Retourne un {{jsxref("Number")}}  représentant le décalage maximum de défilement gauche possible pour l'élément.
      
- 
      {{domxref("Element.scrollTop")}}
      
+ 
      Element.scrollLeftMax {{non-standard_inline}} {{readOnlyInline}}
      
+ 
      Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement gauche possible pour l'élément.
      
+ 
      Element.scrollTop
      
  
      Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.
      
- 
      {{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}
      
+ 
      Element.scrollTopMax {{non-standard_inline}} {{readOnlyInline}}
      
  
      Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.
      
- 
      {{domxref("Element.scrollWidth")}} {{readOnlyInline}}
      
+ 
      Element.scrollWidth {{readOnlyInline}}
      
  
      Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.
      
- 
      {{domxref("Element.shadowRoot")}} {{readOnlyInline}}
      
+ 
      Element.shadowRoot {{readOnlyInline}}
      
  
      Renvoie la racine shadow la plus jeune hébergée par l'élément.
      
- 
      {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
      
- 
      Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. Disponible seulement pour les WebExtensions.
      
- 
      {{domxref("Element.slot")}} {{experimental_inline}}
      
+ 
      Element.openOrClosedShadowRoot {{Non-standard_Inline}}{{readOnlyInline}}
      
+ 
      Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. Disponible seulement pour les WebExtensions.
      
+ 
      Element.slot {{experimental_inline}}
      
  
      Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. Un emplacement (slot) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.
      
- 
      {{domxref("Element.tabStop")}} {{non-standard_inline}}
      
+ 
      Element.tabStop {{non-standard_inline}}
      
  
      Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.
      
- 
      {{domxref("Element.tagName")}} {{readOnlyInline}}
      
- 
      Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.
      
- 
      {{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
      
- 
      Retourne le {{domxref("UndoManager")}} associé à l'élément.
      
- 
      {{domxref("Element.undoScope")}} {{experimental_inline}}
      
+ 
      Element.tagName {{readOnlyInline}}
      
+ 
      Retourne une String avec le nom de la balise pour l'élément donné.
      
+ 
      Element.undoManager {{experimental_inline}} {{readOnlyInline}}
      
+ 
      Retourne le UndoManager associé à l'élément.
      
+ 
      Element.undoScope {{experimental_inline}}
      
  
      Est un {{jsxref("Boolean")}} indiquant si l'élément est un hôte de portée d'annulation, ou non.
      
 
      
 
 
      
-
      Note :  DOM niveau 3 définit namespaceURI, localName et prefix sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans Element.
      
+
      Note : DOM niveau 3 définit namespaceURI, localName et prefix sur l'interface Node. Dans DOM4, ils ont été déplacés dans Element.
      
 
 
      Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.
      
 
      
 
 
      Propriété inclue dans "Slotable"
      
 
-
      L'interface Element inclut la propriété suivante, définie sur le "mixin"  {{domxref("Slotable")}}. 
      
+
      L'interface Element inclut la propriété suivante, définie sur le "mixin"  Slotable. 
      
 
 
      
- 
      {{domxref("Slotable.assignedSlot")}}{{readonlyInline}}
      
- 
      renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.
      
+ 
      Slotable.assignedSlot{{readonlyInline}}
      
+ 
      renvoie un HTMLSlotElement représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.
      
 
      
 
 
      Méthodes
      
 
-
      Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}},  {{domxref("ChildNode")}} , {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.
      
+
      Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de ParentNode,  ChildNode , NonDocumentTypeChildNode et Animatable.
      
 
 
      
- 
      {{domxref("EventTarget.addEventListener()")}}
      
+ 
      EventTarget.addEventListener()
      
  
      enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.
      
- 
      {{domxref("Element.attachShadow()")}}
      
- 
      Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (racine).
      
- 
      {{domxref("Element.animate()")}} {{experimental_inline}}
      
+ 
      Element.attachShadow()
      
+ 
      Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa ShadowRoot (racine).
      
+ 
      Element.animate() {{experimental_inline}}
      
  
      Une méthode raccourcie pour créer et exécuter une animation sur un élément. Renvoie l'instance d'objet Animation créée.
      
- 
      {{domxref("Element.closest()")}}
      
- 
      Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.
      
- 
      {{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}
      
- 
      Crée un shadow DOM sur l'élément, le transforme en un hôte fantôme. Renvoie un  {{domxref("ShadowRoot")}}.
      
- 
      {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
      
- 
      Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.
      
- 
      {{domxref("EventTarget.dispatchEvent()")}}
      
+ 
      Element.closest()
      
+ 
      Retourne l'Element qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.
      
+ 
      Element.createShadowRoot() {{experimental_inline}} {{deprecated_inline()}}
      
+ 
      Crée un shadow DOM sur l'élément, le transforme en un hôte fantôme. Renvoie un  ShadowRoot.
      
+ 
      Element.computedStyleMap() {{Experimental_Inline}}
      
+ 
      Retourne une interface StylePropertyMapReadOnly fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à CSSStyleDeclaration.
      
+ 
      EventTarget.dispatchEvent()
      
  
      Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.
      
- 
      {{domxref("Element.getAnimations()")}} {{experimental_inline}}
      
+ 
      Element.getAnimations() {{experimental_inline}}
      
  
      Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.
      
- 
      {{domxref("Element.getAttribute()")}}
      
+ 
      Element.getAttribute()
      
  
      Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.
      
- 
      {{domxref("Element.getAttributeNames()")}}
      
+ 
      Element.getAttributeNames()
      
  
      Retourne un tableau des noms d'attribut de l'élément courant.
      
- 
      {{domxref("Element.getAttributeNS()")}}
      
+ 
      Element.getAttributeNS()
      
  
      Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.
      
- 
      {{domxref("Element.getBoundingClientRect()")}}
      
+ 
      Element.getBoundingClientRect()
      
  
      Retourne la taille d'un élément et ses positions relatives au "viewport".
      
- 
      {{domxref("Element.getClientRects()")}}
      
+ 
      Element.getClientRects()
      
  
      Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.
      
- 
      {{domxref("Element.getElementsByClassName()")}}
      
- 
      Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.
      
- 
      {{domxref("Element.getElementsByTagName()")}}
      
+ 
      Element.getElementsByClassName()
      
+ 
      Retourne une HTMLCollection qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.
      
+ 
      Element.getElementsByTagName()
      
  
      Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.
      
- 
      {{domxref("Element.getElementsByTagNameNS()")}}
      
+ 
      Element.getElementsByTagNameNS()
      
  
      Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.
      
- 
      {{domxref("Element.hasAttribute()")}}
      
+ 
      Element.hasAttribute()
      
  
      Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.
      
- 
      {{domxref("Element.hasAttributeNS()")}}
      
+ 
      Element.hasAttributeNS()
      
  
      Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.
      
- 
      {{domxref("Element.hasAttributes()")}}
      
+ 
      Element.hasAttributes()
      
  
      Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.
      
- 
      {{DOMxRef("Element.hasPointerCapture()")}}
      
- 
      Indique si l'élément sur lequel la méthode est invoquée a  une capture de pointeur pour le pointeur spécifié par son identifiant.
      
- 
      {{domxref("Element.insertAdjacentElement")}}
      
+ 
      Element.hasPointerCapture()
      
+ 
      Indique si l'élément sur lequel la méthode est invoquée a une capture de pointeur pour le pointeur spécifié par son identifiant.
      
+ 
      Element.insertAdjacentElement
      
  
      Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.
      
- 
      {{domxref("Element.insertAdjacentHTML")}}
      
+ 
      Element.insertAdjacentHTML
      
  
      Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.
      
- 
      {{domxref("Element.insertAdjacentText")}}
      
+ 
      Element.insertAdjacentText
      
  
      Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.
      
- 
      {{domxref("Element.matches()")}}
      
+ 
      Element.matches()
      
  
      Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.
      
- 
      {{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}
      
- 
      Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.
      
- 
      {{domxref("Element.querySelector()")}}
      
- 
      Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.
      
- 
      {{domxref("Element.querySelectorAll")}}
      
- 
      Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.
      
- 
      {{domxref("Element.releasePointerCapture")}}
      
+ 
      Element.pseudo() {{Experimental_Inline}}
      
+ 
      Retourne un CSSPseudoElement représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.
      
+ 
      Element.querySelector()
      
+ 
      Retourne le premier Node correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.
      
+ 
      Element.querySelectorAll
      
+ 
      Retourne une NodeList des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.
      
+ 
      Element.releasePointerCapture
      
  
      Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.
      
- 
      {{domxref("ChildNode.remove()")}} {{experimental_inline}}
      
+ 
      ChildNode.remove() {{experimental_inline}}
      
  
      Supprime l'élément de la liste des enfants de son parent.
      
- 
      {{domxref("Element.removeAttribute()")}}
      
+ 
      Element.removeAttribute()
      
  
      Supprime l'attribut nommé du noeud courant.
      
- 
      {{domxref("Element.removeAttributeNS()")}}
      
+ 
      Element.removeAttributeNS()
      
  
      Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.
      
- 
      {{domxref("EventTarget.removeEventListener()")}}
      
+ 
      EventTarget.removeEventListener()
      
  
      Supprime un écouteur d'évènement de l'élément.
      
- 
      {{domxref("Element.requestFullscreen()")}} {{experimental_inline}}
      
+ 
      Element.requestFullscreen() {{experimental_inline}}
      
  
      Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.
      
- 
      {{domxref("Element.requestPointerLock()")}} {{experimental_inline}}
      
+ 
      Element.requestPointerLock() {{experimental_inline}}
      
  
      Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.
      
- 
      {{domxref("Element.scroll()")}}
      
+ 
      Element.scroll()
      
  
      Défile vers les coordonnées fournises au sein d'un élément.
      
- 
      {{domxref("Element.scrollBy()")}}
      
+ 
      Element.scrollBy()
      
  
      Défile au sein d'un élément d'autant de pixels que demandé.
      
- 
      {{domxref("Element.scrollIntoView()")}} {{experimental_inline}}
      
+ 
      Element.scrollIntoView() {{experimental_inline}}
      
  
      Fait défiler la page jusqu'à ce que l'élément entre dans la vue.
      
- 
      {{domxref("Element.scrollTo()")}}
      
+ 
      Element.scrollTo()
      
  
      Défile vers les coordonnées fournises au sein d'un élément.
      
- 
      {{domxref("Element.setAttribute()")}}
      
+ 
      Element.setAttribute()
      
  
      Définit la valeur d'un attribut nommé du nœud actuel.
      
- 
      {{domxref("Element.setAttributeNS()")}}
      
+ 
      Element.setAttributeNS()
      
  
      Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.
      
- 
      {{domxref("Element.setCapture()")}} {{non-standard_inline}}
      
+ 
      Element.setCapture() {{non-standard_inline}}
      
  
      Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.
      
- 
      {{domxref("Element.setPointerCapture()")}}
      
- 
      Désigne un élément spécifique en tant que cible de capture des futurs évènements de pointeur.
      
- 
      {{DOMxRef("Element.toggleAttribute()")}}
      
+ 
      Element.setPointerCapture()
      
+ 
      Désigne un élément spécifique en tant que cible de capture des futurs évènements de pointeur.
      
+ 
      Element.toggleAttribute()
      
  
      Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.
      
  
      
  
      Méthodes obsolètes
      
  
      
- 
      {{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}
      
- 
      Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.
      
- 
      {{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}
      
- 
      Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.
      
- 
      {{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}
      
+ 
      Element.getAttributeNode(){{obsolete_inline}}
      
+ 
      Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un Attr.
      
+ 
      Element.getAttributeNodeNS(){{obsolete_inline}}
      
+ 
      Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un Attr.
      
+ 
      Element.removeAttributeNode() {{obsolete_inline}}
      
  
      Supprime la représentation du noeud de l'attibut nommé du noeud actuel.
      
- 
      {{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}
      
+ 
      Element.setAttributeNode() {{obsolete_inline}}
      
  
      Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.
      
- 
      {{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}
      
+ 
      Element.setAttributeNodeNS() {{obsolete_inline}}
      
  
      Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.
      
 
      
 
@@ -220,235 +221,146 @@ translation_of: Web/API/Element
 
      Ecoute ces évènements en utilisant addEventListener() ou en assignant un écouteur d'évènement (event listener) au oneventname propriété de cette interface.
      
 
 
      
- 
      {{domxref("Element/cancel_event", "cancel")}}
      
+ 
      cancel
      
  
      Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche Esc ou clique sur le bouton "Ferme le dialogue" qui fait partie de l'interface utilisateur du navigateur .
      
- Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.
      
- 
      {{domxref("Element/error_event", "error")}}
      
+ Aussi disponible via la propriété oncancel.
+ 
      error
      
  
      Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.
      
- 
      {{domxref("Element/scroll_event", "scroll")}}
      
+ Il est aussi disponible via la propriété onerror.
+ 
      scroll
      
  
      Déclenché quand la vue du document un élément a été défilé.
      
- Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.
      
- 
      {{domxref("Element/select_event", "select")}}
      
+ Il est aussi disponible via la propriété onscroll.
+ 
      select
      
  
      Déclenché quand une portion de texte a été sélectionnée.
      
- Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.
      
- 
      {{domxref("Element/show_event", "show")}}
      
- 
      Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut contextmenu. {{deprecated_inline}}
      
- Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.
      
- 
      {{domxref("Element/wheel_event","wheel")}}
      
+ Il est aussi disponible via la propriété onselect.
+ 
      show
      
+ 
      Déclenché quand un évènement contextmenu est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut contextmenu. {{deprecated_inline}}
      
+ Il est aussi disponible via la propriété onshow.
      
+ 
      wheel
      
  
      Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).
      
- Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.
      
+ Il est aussi disponible via la propriété onwheel.
  
      
  
      Évènements du presse-papiers
      
  
      
- 
      {{domxref("Element/copy_event", "copy")}}
      
+ 
      copy
      
  
      Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.
      
- Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.
      
- 
      {{domxref("Element/cut_event", "cut")}}
      
+ Aussi disponible via la propiété oncopy.
+ 
      cut
      
  
      Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.
      
- Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.
      
- 
      {{domxref("Element/paste_event", "paste")}}
      
+ Aussi disponible via la propriété oncut.
+ 
      paste
      
  
      Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.
      
- Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.
      
+ Aussi disponible via la propriété onpaste.
  
      
  
      Évènements de composition
      
  
      
- 
      {{domxref("Element/compositionend_event", "compositionend")}}
      
+ 
      compositionend
      
  
      Déclenché quand un système de composition de texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.
      
- 
      {{domxref("Element/compositionstart_event", "compositionstart")}}
      
+ 
      compositionstart
      
  
      Déclenché quand un système de composition de texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.
      
- 
      {{domxref("Element/compositionupdate_event", "compositionupdate")}}
      
+ 
      compositionupdate
      
  
      Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.
      
  
      
  
      Évènements de focale
      
  
      
- 
      {{domxref("Element/blur_event", "blur")}}
      
+ 
      blur
      
  
      Déclenché quand un élément a perdu la focale.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.
      
- 
      {{domxref("Element/focus_event", "focus")}}
      
+ Il est aussi disponible via la propriété onblur.
+ 
      focus
      
  
      Déclenché quand un élément a obtenu la focale.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.
      
- 
      {{domxref("Element/focusin_event", "focusin")}}
      
+ Il est aussi disponible via la propriété onfocus.
+ 
      focusin
      
  
      Déclenché quand un élément est sur le point d'obtenir la focale.
      
- 
      {{domxref("Element/focusout_event", "focusout")}}
      
+ 
      focusout
      
  
      Déclenché quand un élément est sur le point de perdre la focale.
      
  
      
  
      Évènements de plein écran
      
  
      
- 
      {{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
      
- 
      Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de plein écran.
      
- Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.
      
- 
      {{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
      
- 
      Envoyé à un Element si une erreur survient en tentant de passer vers ou de quitter le plein écran.
      
- Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.
      
+ 
      fullscreenchange
      
+ 
      Envoyé à un Element quand il transite vers ou depuis un état de plein écran.
      
+ Il est aussi disponible via la propriété onfullscreenchange.
      
+ 
      fullscreenerror
      
+ 
      Envoyé à un Element si une erreur survient en tentant de passer vers ou de quitter le plein écran.
      
+ Il est aussi disponible via la propriété onfullscreenerror.
      
  
      
  
      Évènements de clavier
      
  
      
- 
      {{domxref("Element/keydown_event", "keydown")}}
      
+ 
      keydown
      
  
      Déclenché quand une touche est pressée.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.
      
- 
      {{domxref("Element/keypress_event", "keypress")}}
      
+ Il est aussi disponible via la propriété onkeydown.
+ 
      keypress
      
  
      Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.
      
- 
      {{domxref("Element/keyup_event", "keyup")}}
      
+ Il est aussi disponible via la propriété onkeypress.
+ 
      keyup
      
  
      Déclenché quand une touche est relâchée.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.
      
+ Il est aussi disponible via la propriété onkeyup.
  
      
  
      Évènements de souris
      
  
      
- 
      {{domxref("Element/auxclick_event", "auxclick")}}
      
+ 
      auxclick
      
  
      Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.
      
- 
      {{domxref("Element/click_event", "click")}}
      
+ Il est aussi disponible via la propriété onauxclick.
+ 
      click
      
  
      Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.
      
- 
      {{domxref("Element/contextmenu_event", "contextmenu")}}
      
+ Il est aussi disponible via la propriété onclick.
+ 
      contextmenu
      
  
      Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.
      
- 
      {{domxref("Element/dblclick_event", "dblclick")}}
      
+ Il est aussi disponible via la propriété oncontextmenu.
+ 
      dblclick
      
  
      Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.
      
- 
      {{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
      
+ Il est aussi disponible via la propriété ondblclick.
+ 
      DOMActivate {{Deprecated_Inline}}
      
  
      Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.
      
- 
      {{domxref("Element/mousedown_event", "mousedown")}}
      
+ 
      mousedown
      
  
      Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.
      
- 
      {{domxref("Element/mouseenter_event", "mouseenter")}}
      
+ Il est aussi disponible via la propriété onmousedown.
+ 
      mouseenter
      
  
      Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.
      
- 
      {{domxref("Element/mouseleave_event", "mouseleave")}}
      
+ Il est aussi disponible via la propriété onmouseenter.
+ 
      mouseleave
      
  
      Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.
      
- 
      {{domxref("Element/mousemove_event", "mousemove")}}
      
+ Il est aussi disponible via la propriété onmouseleave.
+ 
      mousemove
      
  
      Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.
      
- 
      {{domxref("Element/mouseout_event", "mouseout")}}
      
+ Il est aussi disponible via la propriété onmousemove.
+ 
      mouseout
      
  
      Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.
      
- 
      {{domxref("Element/mouseover_event", "mouseover")}}
      
+ Il est aussi disponible via la propriété onmouseout.
+ 
      mouseover
      
  
      Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.
      
- 
      {{domxref("Element/mouseup_event", "mouseup")}}
      
+ Il est aussi disponible via la propriété onmouseover.
+ 
      mouseup
      
  
      Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.
      
- 
      {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
      
+ Il est aussi disponible via la propriété onmouseup.
+ 
      webkitmouseforcechanged
      
  
      Déclenché à chaque fois que le niveau de pression sur un écran tactile change.
      
- 
      {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
      
+ 
      webkitmouseforcedown
      
  
      Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".
      
- 
      {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
      
- 
      Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.
      
- 
      {{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
      
- 
      Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".
      
+ 
      webkitmouseforcewillbegin
      
+ 
      Déclenché avant l'évènement mousedown.
      
+ 
      webkitmouseforceup
      
+ 
      Déclenché après l'évènement webkitmouseforcedown à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".
      
  
      
  
      Évènements de toucher
      
  
      
- 
      {{domxref("Element/touchcancel_event", "touchcancel")}}
      
+ 
      touchcancel
      
  
      Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.
      
- 
      {{domxref("Element/touchend_event", "touchend")}}
      
+ Il est aussi disponible via la propriété ontouchcancel.
+ 
      touchend
      
  
      Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}
      
- 
      {{domxref("Element/touchmove_event", "touchmove")}}
      
+ Il est aussi disponible via la propriété ontouchend
+ 
      touchmove
      
  
      Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}
      
- 
      {{domxref("Element/touchstart_event", "touchstart")}}
      
+ Il est aussi disponible via la propriété ontouchmove
+ 
      touchstart
      
  
      Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.
      
- Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.
      
+ Il est aussi disponible via la propriété ontouchstart.
 
      
 
-
      Spécifications
      
+
      Spécifications
      
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
      SpécificationÉtatCommentaire
      {{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Ajoute la méthode getAnimations().
      {{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Ajoute les propriétés undoScope et undoManager.
      {{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Ajoute les gestionnaires d'évènements suivants : ongotpointercapture etonlostpointercapture.
      
-    Ajoute les méthodes suivantes : setPointerCapture() et releasePointerCapture().
      {{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Ajoute les gestionnaires d'évènements suivants : ongotpointercapture et onlostpointercapture.
      
-    Ajoute les méthodes suivantes : setPointerCapture() et releasePointerCapture().
      {{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Ajoute les méthodes suivantes : querySelector() et querySelectorAll().
      {{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Ajoute la méthoderequestPointerLock().
      {{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Ajoute la méthode requestFullscreen().
      {{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Ajoute les propriétés suivantes : innerHTML et outerHTML.
      
-    Ajoute les méthodes suivantes : insertAdjacentHTML().
      {{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Ajoute les propriétés suivantes : scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth et clientHeight.
      
-    Ajoute les méthodes suivantes : getClientRects(), getBoundingClientRect() et scrollIntoView().
      {{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.
      {{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Supprime les méthodes suivantes : closest(), setIdAttribute(), setIdAttributeNS(), et setIdAttributeNode().
      
-    Supprime la propriété schemaTypeInfo.
      
-    Modifie la valeur retournée de getElementsByTag() et getElementsByTagNS().
      
-    Déplace hasAttributes() de l'interface Node ici.
      
-    InsèreinsertAdjacentElement() et insertAdjacentText().
      {{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Ajoute les méthodes suivantes : setIdAttribute(), setIdAttributeNS() et setIdAttributeNode(). Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.
      
-    Ajoute la propriété schemaTypeInfo. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.
      {{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}La méthode normalize() a été déplacée vers {{domxref("Node")}}.
      {{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Définition initiale.
      
+{{Specifications}}
 
-
      Compatibilité des navigateurs
      
+
      Compatibilité des navigateurs
      
 
-
      {{Compat("api.Element")}}
      
+
      {{Compat}}
      
diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html
index 1532d2fce7..99ea213416 100644
--- a/files/fr/web/api/eventtarget/index.html
+++ b/files/fr/web/api/eventtarget/index.html
@@ -9,6 +9,7 @@ tags:
   - EventTarget
   - Interface
   - Événements DOM
+browser-compat: api.EventTarget
 translation_of: Web/API/EventTarget
 ---
 
@@ -17,7 +18,7 @@ translation_of: Web/API/EventTarget
 
 
      {{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.
      
 
-
      De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de gestionnaires d'événements via les propriétés et attributs onevent.
      
+
      De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de gestionnaires d'événements via les propriétés et attributs onevent.
      
 
 
      {{InheritanceDiagram}}
      
 
@@ -43,7 +44,7 @@ translation_of: Web/API/EventTarget
 
 
      Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés onevent.
      
 
-
      Voir aussi liaisons WebIDL.
      
+
      Voir aussi liaisons WebIDL.
      
 
 
        
  
      • void setEventHandler(DOMString type, EventHandler handler) {{non-standard_inline}}
        • 
@@ -92,43 +93,18 @@ EventTarget.prototype.dispatchEvent = function (event) {
 }
 
      
 
-
      Spécifications
      
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
      SpécificationStatusComment
      {{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}Pas de changement.
      {{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}Quelques paramètres sont désormais optionnels (listener), ou acceptent la valeur nulle (useCapture).
      {{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Définition initiale.
      
-
-
      Compatibilité des navigateurs
      
-
-
      {{Compat("api.EventTarget")}}
      
+
      Spécifications
      
+
+
      {{Specifications}}
      
+
+
      Compatiblité des navigateurs
      
+
+
      {{Compat}}
      
 
 
      Voir également
      
 
 
diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html
index 82ad7bb947..0074201183 100644
--- a/files/fr/web/api/formdata/has/index.html
+++ b/files/fr/web/api/formdata/has/index.html
@@ -16,7 +16,7 @@ translation_of: Web/API/FormData/has
 
      La méthode has() de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet FormData contient une certaine clé.
      
 
 
      
-
      Note : Cette méthode est disponible dans les Web Workers.
      
+
      Note : Cette méthode est disponible dans les Web Workers.
      
 
      
 
 
      Syntaxe
      
@@ -74,7 +74,7 @@ formData.has('username'); // Retourne true
 
 
diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html
index 2aa0122f78..b6b9ad2acf 100644
--- a/files/fr/web/api/formdata/keys/index.html
+++ b/files/fr/web/api/formdata/keys/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/FormData/keys
 
      La méthode FormData.keys() renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.
      
 
 
      
-
      Note : Cette méthode est disponible dans les Web Workers.
      
+
      Note : Cette méthode est disponible dans les Web Workers.
      
 
      
 
 
      Syntaxe
      
@@ -73,7 +73,7 @@ cle2
    
 
 
diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html
index 64c0650649..3f484723f7 100644
--- a/files/fr/web/api/notification/actions/index.html
+++ b/files/fr/web/api/notification/actions/index.html
@@ -51,6 +51,6 @@ translation_of: Web/API/Notification/actions
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html
index fd6bdbbcbb..d89bd55769 100644
--- a/files/fr/web/api/notification/body/index.html
+++ b/files/fr/web/api/notification/body/index.html
@@ -48,5 +48,5 @@ translation_of: Web/API/Notification/body
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html
index d8d7671766..37f7f929b6 100644
--- a/files/fr/web/api/notification/close/index.html
+++ b/files/fr/web/api/notification/close/index.html
@@ -76,5 +76,5 @@ translation_of: Web/API/Notification/close
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html
index 1abb8eb28e..e6e29516f2 100644
--- a/files/fr/web/api/notification/data/index.html
+++ b/files/fr/web/api/notification/data/index.html
@@ -50,5 +50,5 @@ translation_of: Web/API/Notification/data
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html
index 612152ed86..6e694e6d14 100644
--- a/files/fr/web/api/notification/dir/index.html
+++ b/files/fr/web/api/notification/dir/index.html
@@ -58,5 +58,5 @@ translation_of: Web/API/Notification/dir
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html
index 441ed4c989..19eac0702c 100644
--- a/files/fr/web/api/notification/icon/index.html
+++ b/files/fr/web/api/notification/icon/index.html
@@ -48,5 +48,5 @@ translation_of: Web/API/Notification/icon
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html
index bd84cc0b1d..0ad86d51a3 100644
--- a/files/fr/web/api/notification/image/index.html
+++ b/files/fr/web/api/notification/image/index.html
@@ -47,5 +47,5 @@ translation_of: Web/API/Notification/image
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html
index 78de3344d7..207ba16762 100644
--- a/files/fr/web/api/notification/index.html
+++ b/files/fr/web/api/notification/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/Notification
 ---
 
    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
    
 
-
    L'interface Notification de l'API Notifications est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.
    
+
    L'interface Notification de l'API Notifications est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.
    
 
 
    Constructeur
    
 
@@ -101,7 +101,7 @@ translation_of: Web/API/Notification
 
 
    Méthodes d'instance
    
 
-
    Ces propriétés ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hérite également de l'interface {{domxref ("EventTarget")}}.
    
+
    Ces propriétés ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hérite également de l'interface {{domxref ("EventTarget")}}.
    
 
 
    
  
    {{domxref("Notification.close()")}}
    
@@ -173,5 +173,5 @@ translation_of: Web/API/Notification
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html
index 4dfdac7556..91134377e5 100644
--- a/files/fr/web/api/notification/lang/index.html
+++ b/files/fr/web/api/notification/lang/index.html
@@ -49,5 +49,5 @@ translation_of: Web/API/Notification/lang
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html
index e83daddaf0..f780fc27a1 100644
--- a/files/fr/web/api/notification/maxactions/index.html
+++ b/files/fr/web/api/notification/maxactions/index.html
@@ -58,6 +58,6 @@ console.log(`This device can display at most ${maxActions} actions on each notif
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html
index 6da9861c9c..48578eb688 100644
--- a/files/fr/web/api/notification/notification/index.html
+++ b/files/fr/web/api/notification/notification/index.html
@@ -8,15 +8,16 @@ tags:
   - Notification
   - Notifications
   - Reference
+browser-compat: api.Notification.Notification
 translation_of: Web/API/Notification/Notification
 ---
 
    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
    
 
-
    Le constructeur Notification() crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.
    
+
    Le constructeur Notification() crée une nouvelle instance d'objet Notification, qui représente une notification utilisateur.
    
 
 
    Syntaxe
    
 
-
    const myNotification = new Notification(title, options)
    
+
    const myNotification = new Notification(title, options)
    
 
 
    Paramètres
    
 
@@ -27,18 +28,18 @@ translation_of: Web/API/Notification/Notification
  
    Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
  
      
   
    • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
      • 
-  
    • lang: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
      • 
-  
    • badge: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
      • 
-  
    • body: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.
      • 
-  
    • tag: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.
      • 
-  
    • icon: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.
      • 
-  
    • image: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.
      • 
+  
    • lang: La langue de la notification, telle que spécifiée à l'aide d'un DOMString représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
      • 
+  
    • badge: Un USVString contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
      • 
+  
    • body: Un DOMString représentant le corps du texte de la notification, qui est affiché sous le titre.
      • 
+  
    • tag: Un DOMString représentant un tag d'identification pour la notification.
      • 
+  
    • icon: Une USVString contenant l'URL d'une icône à afficher dans la notification.
      • 
+  
    • image: Une USVString contenant l'URL d'une image à afficher dans la notification.
      • 
   
    • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
      • 
-  
    • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification.
      • 
-  
    • renotify: Un {{domxref ("Boolean")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
      • 
-  
    • requireInteraction: Un {{domxref ("Boolean")}} 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.
      • 
-  
    • 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.
      • 
-  
    • silent: Un {{domxref ("Boolean")}} 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.
      • 
+  
    • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification.
      • 
+  
    • renotify: Un Boolean spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
      • 
+  
    • requireInteraction: Un Boolean 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.
      • 
+  
    • actions: Un tableau de 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.
      • 
+  
    • silent: Un Boolean 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.
      • 
  
    
  
    
 
    
@@ -47,42 +48,27 @@ translation_of: Web/API/Notification/Notification
 
 
    Dans notre démo Emogotchi (voir le code source), nous exécutons une fonction spawnNotification() lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet options nécessaire et déclenche la notification à l'aide du constructeur Notification().
    
 
-
    function spawnNotification(theBody, theIcon, theTitle) {
-  const options = {
-    body: theBody,
-    icon: theIcon
-  }
-  const n = new Notification(theTitle, options)
+
    function spawnNotification(body, icon, title) {
+  const options = {
+    body: body,
+    icon: icon
+  };
+  const n = new Notification(title, options);
 }
    
 
-
    Spécifications
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    SpécificationStatusComment
    {{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}{{Spec2('Web Notifications')}}Définition initiale.
    
-
-
    Compatibilité des navigateurs
    
-
-
    {{Compat("api.Notification.Notification")}}
    
+
    Spécifications
    
+
+{{Specifications}}
+
+
    Compatibilité des navigateurs
    
+
+
    {{Compat}}
    
 
 
    Notes Chrome
    
 
 
    À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.
    
 
-
    {{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}
    
+
    Chrome pour Android lance une erreur TypeError lors de l'appel du constructeur Notification. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le Chromium issue tracker pour plus de détails.
    
 
 
    Notes Internet Explorer
    
 
@@ -92,5 +78,5 @@ translation_of: Web/API/Notification/Notification
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html
index b204c7075d..5d5edbde16 100644
--- a/files/fr/web/api/notification/onclose/index.html
+++ b/files/fr/web/api/notification/onclose/index.html
@@ -29,5 +29,5 @@ Notification.onclose = (event) => { ... }
 
 
diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html
index 8475f85cc4..476e5cb9d7 100644
--- a/files/fr/web/api/notification/onerror/index.html
+++ b/files/fr/web/api/notification/onerror/index.html
@@ -48,5 +48,5 @@ translation_of: Web/API/Notification/onerror
 
 
diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html
index 9701a3fc04..bdb0953b6f 100644
--- a/files/fr/web/api/notification/onshow/index.html
+++ b/files/fr/web/api/notification/onshow/index.html
@@ -29,5 +29,5 @@ translation_of: Web/API/Notification/onshow
 
 
diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html
index 0b8389761e..a79c385380 100644
--- a/files/fr/web/api/notification/renotify/index.html
+++ b/files/fr/web/api/notification/renotify/index.html
@@ -52,5 +52,5 @@ translation_of: Web/API/Notification/renotify
 
    Voir également
    
 
 
diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html
index 37a781ea03..b5b1222762 100644
--- a/files/fr/web/api/notification/requestpermission/index.html
+++ b/files/fr/web/api/notification/requestpermission/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/Notification/requestPermission
    -

    Note: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez Utilisation de l'API Notifications pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.

    +

    Note: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez Utilisation de l'API Notifications pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.

    La méthode requestPermission() de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.

    @@ -115,5 +115,5 @@ translation_of: Web/API/Notification/requestPermission

    Voir également

    diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html index df26718bb8..d598a97269 100644 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/requireInteraction

    Voir également

    diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html index bfd9a16b50..5452c77398 100644 --- a/files/fr/web/api/notification/silent/index.html +++ b/files/fr/web/api/notification/silent/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/silent

    Voir également

    diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html index 38a7683588..7794c70e61 100644 --- a/files/fr/web/api/notification/tag/index.html +++ b/files/fr/web/api/notification/tag/index.html @@ -51,5 +51,5 @@ translation_of: Web/API/Notification/tag

    Voir également

    diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html index 28625dfc53..ca54bf330c 100644 --- a/files/fr/web/api/notification/timestamp/index.html +++ b/files/fr/web/api/notification/timestamp/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/timestamp

    Voir également

    diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html index 7b046666cf..40edbb0790 100644 --- a/files/fr/web/api/notification/title/index.html +++ b/files/fr/web/api/notification/title/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/title

    Voir également

    diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html index cd3527b56d..f9945d7c8a 100644 --- a/files/fr/web/api/notification/vibrate/index.html +++ b/files/fr/web/api/notification/vibrate/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Notification/vibrate

    Valeur

    -

    Un modèle de vibration, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.

    +

    Un modèle de vibration, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.

    Spécifications

    @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/vibrate

    Voir également

    diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html index f0b8fdfd0b..1a5dc8eb8e 100644 --- a/files/fr/web/api/notifications_api/index.html +++ b/files/fr/web/api/notifications_api/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Notifications_API

    Cela créera une boîte de dialogue, proche de cette apparence:

    -

    +

    De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

    @@ -37,10 +37,10 @@ translation_of: Web/API/Notifications_API

    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, pour permettre aux service worker de déclencher des notifications.

    +

    En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'API ServiceWorker, pour permettre aux service worker de déclencher des notifications.

    -

    Note: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

    +

    Note: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

    Les interfaces de Notifications

    @@ -87,5 +87,5 @@ translation_of: Web/API/Notifications_API

    Voir également

    diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html index 9568f1894c..d65ab4a999 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification

    La méthode showNotification() de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.

    -

    Note: Cette fonctionnalité est disponible dans les Web Workers.

    +

    Note: Cette fonctionnalité est disponible dans les Web Workers.

    Syntaxe

    -
    ​serviceWorkerRegistration.showNotification(title, [options])
    +
    ​serviceWorkerRegistration.showNotification(title, [options])

    Paramètres

    @@ -34,7 +34,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification
    • 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.
      @@ -45,13 +45,13 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification
    • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
    • icon: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.
    • image: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.
      • -
    • lang: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
      • +
    • lang: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
    • renotify: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
    • 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.
      • -
    • vibrate: Un modèle de vibration 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.
      • +
    • vibrate: Un modèle de vibration 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.
    @@ -62,7 +62,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification

    Exemples

    -
    navigator.serviceWorker.register('sw.js')
+
    navigator.serviceWorker.register('sw.js')
 
 function showNotification() {
   Notification.requestPermission((result) => {
diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.html b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html
index 62c13d99d3..640ac4c7b4 100644
--- a/files/fr/web/http/cors/errors/corsrequestnothttp/index.html
+++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html
@@ -19,13 +19,13 @@ 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é ?
    
 
 
    Les requêtes {{Glossary("CORS")}} ne peuvent utiliser que les URL HTTPS, mais l'URL spécifiée par la requête est d'un type différent. Cela se produit souvent si l'URL spécifie un fichier local, en utilisant un URL de la forme file:///.
    
 
-
    Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, Fetch APIs, Web Fonts (@font-face), WebGL textures, et des stylesheets XSL.
    
+
    Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, Fetch APIs, Web Fonts (@font-face), WebGL textures, et des stylesheets XSL.
    
 
 
    Sécurité des fichiers locaux dans Firefox 68
    
 
@@ -36,8 +36,8 @@ translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/http/headers/cache-control/index.html b/files/fr/web/http/headers/cache-control/index.html
index ae9d7bc85e..254df474ee 100644
--- a/files/fr/web/http/headers/cache-control/index.html
+++ b/files/fr/web/http/headers/cache-control/index.html
@@ -84,14 +84,14 @@ Cache-Control: stale-if-error=<seconds>
 
    Une réponse est normalement mise en cache par le navigateur si
    
 
 
@@ -149,7 +149,7 @@ Cache-Control: stale-if-error=<seconds>
  
    no-transform
    
  
    Aucune conversion ou transformation ne devraient être réalisée sur la ressource. Ainsi, les en-tête Content-Encoding, Content-Range et Content-Type ne devraient jamais être modifiés par un proxy (serveur mandataire). Un proxy non-transparent pourrait, en l'absence de cet en-tête, convertir ou compresser (avec pertes) des images pour réduire la place occupée en cache ou diminuer le volume de données à transférer sur un lien lent.
    
  
    only-if-cached
    
- 
    Réglé par le client pour indiquer "ne pas utiliser le réseau" pour la réponse. Le cache doit soit répondre en utilisant une réponse stockée, soit répondre avec un code d'état 504. Les en-têtes conditionnels tels que If-None-Match ne doivent pas être définis. Il n'y a aucun effet si only-if-cached est défini par un serveur dans le cadre d'une réponse.
    
+ 
    Réglé par le client pour indiquer "ne pas utiliser le réseau" pour la réponse. Le cache doit soit répondre en utilisant une réponse stockée, soit répondre avec un code d'état 504. Les en-têtes conditionnels tels que If-None-Match ne doivent pas être définis. Il n'y a aucun effet si only-if-cached est défini par un serveur dans le cadre d'une réponse.
    
 
 
 
    Exemples
    
@@ -231,7 +231,7 @@ Cache-Control: no-cache, max-age=0, stale-while-revalidate=300
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html
index 1417d96bb9..c512933db4 100644
--- a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html
+++ b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html
@@ -57,7 +57,7 @@ Content-Security-Policy: frame-ancestors <source> <source>;
 
 
    
  
    <host-source>
    
- 
    Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un protocole et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque '*'), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides. Vous ne devez pas mettre de guillemets simples.
    
+ 
    Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un protocole et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque '*'), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides. Vous ne devez pas mettre de guillemets simples.
    
  Exemples :
  
      
   
    • http://*.example.com: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com via le protocole http:.
      • 
@@ -73,9 +73,9 @@ Content-Security-Policy: frame-ancestors <source> <source>;
  
      Un protocole tel que http: or https:. Les deux-points sont nécessaires et vous ne devez pas mettre de guillemets. Vous pouvez aussi spécifier des schémas de données bien que ce ne soit pas recommandé.
  
        
   
      • data: Autorise les URI data: à être utilisées comme source de contenu. Cette pratique manque de sécurité ; une personne malveillante peut aussi injecter des URI data: arbitraires. Utilisez cette valeur avec parcimonie et certainement pas pour des scripts.
        • 
-  
      • mediastream: permet aux URI mediastream: d'être utilisées comme source de contenu.
        • 
-  
      • blob: permet aux URI blob: d'être utilisées comme source de contenu.
        • 
-  
      • filesystem: Allows URI filesystem: d'être utilisées comme source de contenu.
        • 
+  
      • mediastream: permet aux URI mediastream: d'être utilisées comme source de contenu.
        • 
+  
      • blob: permet aux URI blob: d'être utilisées comme source de contenu.
        • 
+  
      • filesystem: Allows URI filesystem: d'être utilisées comme source de contenu.
        • 
  
      
  
      
  
      'self'
      
diff --git a/files/fr/web/http/headers/content-security-policy/index.html b/files/fr/web/http/headers/content-security-policy/index.html
index 4d4a843a19..4ffcff7b78 100644
--- a/files/fr/web/http/headers/content-security-policy/index.html
+++ b/files/fr/web/http/headers/content-security-policy/index.html
@@ -124,11 +124,11 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy
 
    
 
 
    
-
    Bien que la directive report-to est prévue remplacer la directive report-uri maintenant dépréciée, report-to n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront report-to, vous pouvez spécifier les deux directives report-uri et report-to:
    
+
    Bien que la directive report-to est prévue remplacer la directive report-uri maintenant dépréciée, report-to n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront report-to, vous pouvez spécifier les deux directives report-uri et report-to:
    
 
 
    Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname
    
 
-
    Dans les navigateurs qui supportent report-to, la directive report-uri sera ignorée.
    
+
    Dans les navigateurs qui supportent report-to, la directive report-uri sera ignorée.
    
 
    
 
 
    
diff --git a/files/fr/web/http/headers/index.html b/files/fr/web/http/headers/index.html
index a493fb6715..95bcc91ab5 100644
--- a/files/fr/web/http/headers/index.html
+++ b/files/fr/web/http/headers/index.html
@@ -321,7 +321,7 @@ translation_of: Web/HTTP/Headers
  
    {{HTTPHeader("X-Frame-Options")}} (XFO)
    
  
    indique si un navigateur doit être autorisé à afficher une page dans un {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}.
    
  
    {{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}
    
- 
    Sépcifie si un fichier de règlementation interdomaines (crossdomain.xml) est autorisé. Ce fichier peut définir une règle pour accorder aux clients (comme Adobe Flash Player, Adobe Acrobat, Microsoft Silverlight ou Apache Flex) la permission de gérer des données entre domaines qui seraient autrement restreintes à cause de Same-Origin Policy. Voir la spécification Cross-domain Policy File pour plus d'informations.
    
+ 
    Sépcifie si un fichier de règlementation interdomaines (crossdomain.xml) est autorisé. Ce fichier peut définir une règle pour accorder aux clients (comme Adobe Flash Player, Adobe Acrobat, Microsoft Silverlight ou Apache Flex) la permission de gérer des données entre domaines qui seraient autrement restreintes à cause de Same-Origin Policy. Voir la spécification Cross-domain Policy File pour plus d'informations.
    
  
    {{HTTPHeader("X-Powered-By")}}
    
  
    peut être défini par l'environnement hôte ou par d'autres cadriciels, il contient des informations sur eux sans fournir aucun information utile à l'application ni aux visiteurs. Désactivez cet en-tête pour éviter d'exposer des informations et des vulnérabilités potentielles.
    
  
    {{HTTPHeader("X-XSS-Protection")}}
    
diff --git a/files/fr/web/http/methods/trace/index.html b/files/fr/web/http/methods/trace/index.html
index 97585ec305..50422020f7 100644
--- a/files/fr/web/http/methods/trace/index.html
+++ b/files/fr/web/http/methods/trace/index.html
@@ -72,5 +72,5 @@ original_slug: Web/HTTP/Méthode/TRACE
 
    Voir également
    
 
 
diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.html b/files/fr/web/javascript/reference/classes/private_class_fields/index.html
index 7d5aff7d9c..c8df9cbd19 100644
--- a/files/fr/web/javascript/reference/classes/private_class_fields/index.html
+++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.html
@@ -202,6 +202,6 @@ new ClassWithPrivateAccessor();
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.html b/files/fr/web/javascript/reference/classes/public_class_fields/index.html
index c464973a96..6344539840 100644
--- a/files/fr/web/javascript/reference/classes/public_class_fields/index.html
+++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.html
@@ -15,7 +15,7 @@ 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) proposée au TC39, 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. Voir l'information de compatibilité 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. Voir l'information de compatibilité 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.

    diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html index f896739821..4ca81837ec 100644 --- a/files/fr/web/svg/element/ellipse/index.html +++ b/files/fr/web/svg/element/ellipse/index.html @@ -57,7 +57,7 @@ translation_of: Web/SVG/Element/ellipse
    Attributs de traitement conditionnel
    Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
    Attributs d'événements
    -
    Attributs d'événément globaux, Attributs d'événément graphiques
    +
    Attributs d'événément globaux, Attributs d'événément graphiques
    Attributs de présentation
    Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
    Attributs ARIA
    diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html index 800b18c89c..85628e4936 100644 --- a/files/fr/web/svg/element/pattern/index.html +++ b/files/fr/web/svg/element/pattern/index.html @@ -2,119 +2,101 @@ title: slug: Web/SVG/Element/pattern tags: - - Conteneur SVG - - Eléments(2) + - Element - SVG + - SVG Container +browser-compat: svg.elements.pattern translation_of: Web/SVG/Element/pattern ---
    {{SVGRef}}
    -

    L'élément <pattern> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.

    +

    L'élément <pattern> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.

    -

    Le <pattern> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.

    +

    Le <pattern> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.

    -
    html, body, svg { height: 100% }
-
    +
    + -
    <svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
-      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
-    </pattern>
-  </defs>
+
    <svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
+    </pattern>
+  </defs>
 
-  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
-  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
+  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
+  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
 </svg>
    
+
    -

    {{EmbedLiveSample('Exemple', 150, '100%')}}

    +

    {{EmbedLiveSample('example', 150, '100%')}}

    -

    Attributs

    +

    Attributs

    {{SVGAttr("height")}}
    Cet attribut détermine la hauteur du motif de mosaïque.
    - Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui
    + Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui
    {{SVGAttr("href")}}
    Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <pattern>.
    - Type de valeur: <URL>; Valeur par défaut : none; Animable: yes
    + Type de valeur: <URL>; Valeur par défaut : none; Animable: yes
    {{SVGAttr("patternContentUnits")}}
    -
    Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.
    - Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : userSpaceOnUse; Animable: yes -

    Note : Cet attribut n'a pas d'effet si l'attribut viewBox est définit sur l'élément <pattern>.

    +
    Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.
    + Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : userSpaceOnUse; Animable: yes +

    Note : Cet attribut n'a pas d'effet si l'attribut viewBox est définit sur l'élément <pattern>.

    {{SVGAttr("patternTransform")}}
    -
    Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.
    - Type de valeur : <transform-list>; Valeur par défaut : none; Animatable: yes
    +
    Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.
    + Type de valeur : <transform-list>; Valeur par défaut : none; Animatable: yes
    {{SVGAttr("patternUnits")}}
    -
    Cet attribut définit le système de coordonnées pour les attributs x, y, width , et height.
    - Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : objectBoundingBox; Animable: yes
    +
    Cet attribut définit le système de coordonnées pour les attributs x, y, width , et height.
    + Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : objectBoundingBox; Animable: yes
    {{SVGAttr("preserveAspectRatio")}}
    Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent.
    - Type de valeur : (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut : xMidYMid meet; Animable: yes
    + Type de valeur : (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut : xMidYMid meet; Animable: yes
    {{SVGAttr("viewBox")}}
    Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.
    - Type de valeur : <list-of-numbers> ; Valeur par défaut : none; Animable: yes
    + Type de valeur : <list-of-numbers> ; Valeur par défaut : none; Animable: yes
    {{SVGAttr("width")}}
    Cet attribut détermine la largeur du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    + Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    {{SVGAttr("x")}}
    Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animatable: yes
    + Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animatable: yes
    {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
    -
    Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <pattern>.
    - Type de valeur : <URL>; Valeur par défaut : none; Animable: yes -

    Note : Pour les navigateurs implémentant href, si à la fois href et xlink:href sont définis, xlink:href sera ignoré et seulement href sera utilisé.

    +
    Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <pattern>.
    + Type de valeur : <URL>; Valeur par défaut : none; Animable: yes +

    Note : Pour les navigateurs implémentant href, si à la fois href et xlink:href sont définis, xlink:href sera ignoré et seulement href sera utilisé.

    {{SVGAttr("y")}}
    Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    + Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    -

    Global attributes

    - Attributs principaux
    + +

    Attributs globaux

    + + Attributs principaux
    Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
    -
    Attributs de style
    +
    Attributs de style
    {{SVGAttr('class')}}, {{SVGAttr('style')}}
    -
    Attributs de traitement conditionnel
    +
    Attributs de traitement conditionnel
    Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
    -
    Attributs de présentation
    +
    Attributs de présentation
    Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
    Attributs XLink
    Plus notamment : {{SVGAttr("xlink:title")}}
    -

    Contexte d'utilisation

    +

    Notes d'utilisation

    {{svginfo}}

    -

    Interface DOM 

    - -

    Cet élement implémente l'interface SVGPatternElement.

    - -

    Spécifications

    - - - - - - - - - - - - - - - - - - - - - -
    SpécificationStatusCommentaire
    {{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}}
    {{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
    - -

    Compatibilité des navigateurs

    - -

    {{Compat("svg.elements.pattern")}}

    +

    Spécifications

    + +{{Specifications}} + +

    Compatibilité des navigateurs

    + +

    {{Compat}}

    diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html index ac9c3fbb62..e4981d0eb3 100644 --- a/files/fr/web/svg/element/polygon/index.html +++ b/files/fr/web/svg/element/polygon/index.html @@ -6,38 +6,38 @@ tags: - Reference - SVG - SVG Graphique +browser-compat: svg.elements.polygon translation_of: Web/SVG/Element/polygon ---
    {{SVGRef}}
    -

    L'élément <polygon>  délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.

    +

    L'élément <polygon> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.

    -
    +
    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Exemple d'un polygone avec le remplissage par défaut -->
-  <polygon points="0,100 50,25 50,75 100,0" />
+  <polygon points="0,100 50,25 50,75 100,0" />
 
   <!-- Le même polygone sans remplissage et avec un contour -->
-  <polygon points="100,100 150,25 150,75 200,0"
-            fill="none" stroke="black" />
+  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
 </svg>
    - -

    {{ EmbedLiveSample('SVG', '120', '120', '', 'Web/SVG/Element/polygon') }}

    +
    {{EmbedLiveSample('example', '100', '100')}}
    +

    Attributs

    {{SVGAttr('points')}}
    Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone.
    - Type de valeur: <number>+ ; Valeur par défaut: ""; Peut être animé: oui
    + Type de valeur: <number>+ ; Valeur par défaut: ""; Peut être animé: oui
    {{SVGAttr("pathLength")}}
    Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur.
    - Type de valeur: <number>; Valeur par défaut: aucune; Peut être animé: oui
    + Type de valeur: <number>; Valeur par défaut: aucune; Peut être animé: oui

    Attributs Globaux

    @@ -47,11 +47,11 @@ translation_of: Web/SVG/Element/polygon
    Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}}
    Attribut de style
    {{SVGAttr('class')}} et {{SVGAttr('style')}}
    -
    Attributs conditionnels
    +
    Attributs conditionnels
    Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}}
    Attributs d'évènements
    -
    Attribut d'évènement global, Attribut d'évènement graphique
    -
    Attributs de présentation
    +
    Attribut d'évènement global, Attribut d'évènement graphique
    +
    Attributs de présentation
    Principalement: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}} et {{SVGAttr('visibility')}}
    Attributs ARIA
    aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
    @@ -65,35 +65,13 @@ translation_of: Web/SVG/Element/polygon

    Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}.

    -

    Spécifications

    - - - - - - - - - - - - - - - - - - - - - -
    SpécificationÉtatCommentaire
    {{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}Pas de changement
    {{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}Définition initiale.
    - -

    Compatibilité avec les navigateurs

    - - - -

    {{Compat("svg.elements.polygon")}}

    +

    Spécifications

    + +

    {{Specifications}}

    + +

    Compatibilité avec les navigateurs

    + +

    {{Compat}}

    Voir également

    diff --git a/files/fr/web/web_components/index.html b/files/fr/web/web_components/index.html index bb4fba0dcb..811f67a39b 100644 --- a/files/fr/web/web_components/index.html +++ b/files/fr/web/web_components/index.html @@ -32,7 +32,7 @@ translation_of: Web/Web_Components

    Généralement, l'approche basique pour la création d'un composant Web est la suivante:

      -
    1. Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les Classes pour de plus amples informations).
      2. +
    2. Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les Classes pour de plus amples informations).
    3. Enregistrer le nouvel élément personnalisé en utilisant la méthode {{domxref("CustomElementRegistry.define()")}}, avec en paramètre le nom de l'élément à définir, la classe ou la fonction dans laquelle la fonctionnalité est spécifiée, et optionnellement, de quel élément celui-ci hérite-t-il.
    4. Si nécessaire, connecter un shadow DOM à l'élément personnalisé en utilisant la méthode {{domxref("Element.attachShadow()")}}. Ajouter les éléments-fils, les écouteurs d'événements, etc., au shadow DOM en utilisant les méthodes DOM usuelles.
    5. Si nécessaire, définir un template HTML en utilisant {{htmlelement("template")}} et {{htmlelement("slot")}}. Toujours en utilisant les méthodes DOM usuelles pour cloner le template et le connecter au shadow DOM.
      6. -- cgit v1.2.3-54-g00ecf